@proyecto-viviana/ui 0.1.7 → 0.2.0

package/src/tabs/index.tsx

@@ -0,0 +1,273 @@
+/**
+ * Tabs component for proyecto-viviana-ui
+ *
+ * Styled tabs component built on top of solidaria-components.
+ * Inspired by Spectrum 2's Tabs component patterns.
+ */
+
+import { type JSX, splitProps, createContext, useContext } from 'solid-js'
+import {
+  Tabs as HeadlessTabs,
+  TabList as HeadlessTabList,
+  Tab as HeadlessTab,
+  TabPanel as HeadlessTabPanel,
+  type TabsProps as HeadlessTabsProps,
+  type TabListProps as HeadlessTabListProps,
+  type TabProps as HeadlessTabProps,
+  type TabPanelProps as HeadlessTabPanelProps,
+  type TabsRenderProps,
+  type TabListRenderProps,
+  type TabRenderProps,
+  type TabPanelRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+import type { Key, TabOrientation } from '@proyecto-viviana/solid-stately'
+
+// ============================================
+// SIZE CONTEXT
+// ============================================
+
+export type TabsSize = 'sm' | 'md' | 'lg'
+export type TabsVariant = 'underline' | 'pill' | 'boxed'
+
+interface TabsContextValue {
+  size: TabsSize
+  variant: TabsVariant
+}
+
+const TabsSizeContext = createContext<TabsContextValue>({ size: 'md', variant: 'underline' })
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface TabsProps<T> extends Omit<HeadlessTabsProps<T>, 'class' | 'style'> {
+  /** The size of the tabs. */
+  size?: TabsSize
+  /** The visual variant of the tabs. */
+  variant?: TabsVariant
+  /** Additional CSS class name. */
+  class?: string
+}
+
+export interface TabListProps<T> extends Omit<HeadlessTabListProps<T>, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+export interface TabProps extends Omit<HeadlessTabProps, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+export interface TabPanelProps extends Omit<HeadlessTabPanelProps, 'class' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    tab: 'text-sm px-3 py-1.5',
+    tabList: 'gap-1',
+    panel: 'text-sm p-3',
+  },
+  md: {
+    tab: 'text-base px-4 py-2',
+    tabList: 'gap-2',
+    panel: 'text-base p-4',
+  },
+  lg: {
+    tab: 'text-lg px-5 py-2.5',
+    tabList: 'gap-3',
+    panel: 'text-lg p-5',
+  },
+}
+
+const variantStyles = {
+  underline: {
+    tabList: 'border-b-2 border-primary-600',
+    tab: {
+      base: 'relative border-b-2 -mb-0.5 transition-colors duration-200',
+      default: 'border-transparent text-primary-400 hover:text-primary-200 hover:border-primary-400',
+      selected: 'border-accent text-accent',
+      disabled: 'border-transparent text-primary-600 cursor-not-allowed',
+    },
+  },
+  pill: {
+    tabList: 'bg-bg-300 rounded-lg p-1',
+    tab: {
+      base: 'rounded-md transition-all duration-200',
+      default: 'text-primary-400 hover:text-primary-200 hover:bg-bg-400',
+      selected: 'bg-accent text-primary-100 shadow-sm',
+      disabled: 'text-primary-600 cursor-not-allowed',
+    },
+  },
+  boxed: {
+    tabList: 'border-2 border-primary-600 rounded-lg overflow-hidden',
+    tab: {
+      base: 'border-r-2 border-primary-600 last:border-r-0 transition-colors duration-200',
+      default: 'text-primary-400 bg-bg-400 hover:text-primary-200 hover:bg-bg-300',
+      selected: 'bg-accent/20 text-accent',
+      disabled: 'text-primary-600 bg-bg-300 cursor-not-allowed',
+    },
+  },
+}
+
+// ============================================
+// TABS COMPONENT
+// ============================================
+
+/**
+ * Tabs organize content into multiple sections and allow users to navigate between them.
+ *
+ * Built on solidaria-components Tabs for full accessibility support.
+ */
+export function Tabs<T>(props: TabsProps<T>): JSX.Element {
+  const [local, headlessProps] = splitProps(props, [
+    'size',
+    'variant',
+    'class',
+  ])
+
+  const size = local.size ?? 'md'
+  const variant = local.variant ?? 'underline'
+  const customClass = local.class ?? ''
+
+  const getClassName = (renderProps: TabsRenderProps): string => {
+    const base = 'flex flex-col'
+    const orientationClass = renderProps.orientation === 'vertical' ? 'flex-row' : 'flex-col'
+    const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
+    return [base, orientationClass, disabledClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <TabsSizeContext.Provider value={{ size, variant }}>
+      <HeadlessTabs
+        {...headlessProps}
+        class={getClassName}
+        children={props.children}
+      />
+    </TabsSizeContext.Provider>
+  )
+}
+
+// ============================================
+// TAB LIST COMPONENT
+// ============================================
+
+/**
+ * A TabList contains Tab elements that represent the available tabs.
+ */
+export function TabList<T>(props: TabListProps<T>): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
+  const ctx = useContext(TabsSizeContext)
+  const customClass = local.class ?? ''
+
+  const getClassName = (renderProps: TabListRenderProps): string => {
+    const base = 'flex'
+    const orientationClass = renderProps.orientation === 'vertical' ? 'flex-col' : 'flex-row'
+    const sizeClass = sizeStyles[ctx.size].tabList
+    const variantClass = variantStyles[ctx.variant].tabList
+
+    const focusClass = renderProps.isFocusVisible
+      ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
+      : ''
+
+    return [base, orientationClass, sizeClass, variantClass, focusClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessTabList
+      {...headlessProps}
+      class={getClassName}
+      children={props.children}
+    />
+  )
+}
+
+// ============================================
+// TAB COMPONENT
+// ============================================
+
+/**
+ * A Tab represents an individual tab in a TabList.
+ */
+export function Tab(props: TabProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
+  const ctx = useContext(TabsSizeContext)
+  const customClass = local.class ?? ''
+
+  const getClassName = (renderProps: TabRenderProps): string => {
+    const sizeClass = sizeStyles[ctx.size].tab
+    const variantBase = variantStyles[ctx.variant].tab.base
+
+    let stateClass: string
+    if (renderProps.isDisabled) {
+      stateClass = variantStyles[ctx.variant].tab.disabled
+    } else if (renderProps.isSelected) {
+      stateClass = variantStyles[ctx.variant].tab.selected
+    } else {
+      stateClass = variantStyles[ctx.variant].tab.default
+    }
+
+    const focusClass = renderProps.isFocusVisible
+      ? 'ring-2 ring-accent-300 ring-offset-1 ring-offset-bg-400 outline-none'
+      : ''
+
+    const pressedClass = renderProps.isPressed ? 'scale-95' : ''
+    const cursorClass = renderProps.isDisabled ? '' : 'cursor-pointer'
+
+    return [variantBase, sizeClass, stateClass, focusClass, pressedClass, cursorClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessTab
+      {...headlessProps}
+      class={getClassName}
+      children={props.children}
+    />
+  )
+}
+
+// ============================================
+// TAB PANEL COMPONENT
+// ============================================
+
+/**
+ * A TabPanel displays the content for a selected Tab.
+ */
+export function TabPanel(props: TabPanelProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['class'])
+  const ctx = useContext(TabsSizeContext)
+  const customClass = local.class ?? ''
+
+  const getClassName = (renderProps: TabPanelRenderProps): string => {
+    const base = 'outline-none'
+    const sizeClass = sizeStyles[ctx.size].panel
+
+    const focusClass = renderProps.isFocusVisible
+      ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
+      : ''
+
+    return [base, sizeClass, focusClass, customClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessTabPanel
+      {...headlessProps}
+      class={getClassName}
+      children={props.children}
+    />
+  )
+}
+
+// Attach sub-components for convenience
+Tabs.List = TabList
+Tabs.Tab = Tab
+Tabs.Panel = TabPanel
+
+// Re-export types for convenience
+export type { Key, TabOrientation }

package/src/tag-group/index.tsx

@@ -0,0 +1,240 @@
+/**
+ * TagGroup component for proyecto-viviana-ui
+ *
+ * Styled tag group component built on top of solidaria-components.
+ * A tag group displays a collection of tags that can be selected and/or removed.
+ */
+
+import { type JSX, splitProps, Show } from 'solid-js';
+import {
+  TagList as HeadlessTagList,
+  Tag as HeadlessTag,
+} from '@proyecto-viviana/solidaria-components';
+import type { Key, SelectionMode } from '@proyecto-viviana/solid-stately';
+
+// ============================================
+// TYPES
+// ============================================
+
+export type TagGroupSize = 'sm' | 'md' | 'lg';
+export type TagGroupVariant = 'default' | 'outline' | 'solid';
+
+export interface TagGroupProps<T> {
+  /** The label for the tag group. */
+  label?: string;
+  /** The items to display as tags. */
+  items: T[];
+  /** Function to render the content of each tag. */
+  children: (item: T) => JSX.Element;
+  /** Function to get a unique key from an item. */
+  getKey?: (item: T) => Key;
+  /** Handler called when tags are removed. */
+  onRemove?: (keys: Set<Key>) => void;
+  /** The size of the tags. @default 'md' */
+  size?: TagGroupSize;
+  /** The visual variant of the tags. @default 'default' */
+  variant?: TagGroupVariant;
+  /** The selection mode. @default 'none' */
+  selectionMode?: SelectionMode;
+  /** The currently selected keys (controlled). */
+  selectedKeys?: Iterable<Key>;
+  /** Handler called when selection changes. */
+  onSelectionChange?: (keys: 'all' | Set<Key>) => void;
+  /** Keys that are disabled. */
+  disabledKeys?: Iterable<Key>;
+  /** Additional CSS class name. */
+  class?: string;
+  /** Content to render when empty. */
+  renderEmptyState?: () => JSX.Element;
+}
+
+export interface TagProps {
+  /** A unique key for this tag. */
+  id: Key;
+  /** The content of the tag. */
+  children: JSX.Element;
+  /** Whether the tag is disabled. */
+  isDisabled?: boolean;
+  /** Additional CSS class name. */
+  class?: string;
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    tag: 'text-xs px-2 py-0.5 gap-1',
+    removeButton: 'w-3 h-3',
+    label: 'text-xs',
+  },
+  md: {
+    tag: 'text-sm px-2.5 py-1 gap-1.5',
+    removeButton: 'w-4 h-4',
+    label: 'text-sm',
+  },
+  lg: {
+    tag: 'text-base px-3 py-1.5 gap-2',
+    removeButton: 'w-5 h-5',
+    label: 'text-base',
+  },
+};
+
+const variantStyles = {
+  default: {
+    tag: 'bg-bg-400 text-primary-200 hover:bg-bg-300',
+    selected: 'bg-accent text-white',
+    disabled: 'opacity-50 cursor-not-allowed',
+  },
+  outline: {
+    tag: 'border border-primary-600 text-primary-200 hover:border-primary-500 hover:bg-bg-400/50',
+    selected: 'border-accent bg-accent/10 text-accent',
+    disabled: 'opacity-50 cursor-not-allowed',
+  },
+  solid: {
+    tag: 'bg-primary-600 text-primary-100 hover:bg-primary-500',
+    selected: 'bg-accent text-white',
+    disabled: 'opacity-50 cursor-not-allowed',
+  },
+};
+
+// ============================================
+// TAG GROUP COMPONENT
+// ============================================
+
+/**
+ * A tag group displays a collection of tags that can be selected and/or removed.
+ *
+ * @example
+ * ```tsx
+ * // Simple tag group
+ * <TagGroup
+ *   label="Categories"
+ *   items={categories}
+ *   onRemove={(keys) => removeCategories(keys)}
+ * >
+ *   {(item) => item.name}
+ * </TagGroup>
+ *
+ * // With selection
+ * <TagGroup
+ *   label="Filters"
+ *   items={filters}
+ *   selectionMode="multiple"
+ *   selectedKeys={selectedFilters}
+ *   onSelectionChange={setSelectedFilters}
+ * >
+ *   {(item) => item.label}
+ * </TagGroup>
+ * ```
+ */
+export function TagGroup<T extends { id?: Key; key?: Key }>(props: TagGroupProps<T>): JSX.Element {
+  const [local] = splitProps(props, [
+    'label',
+    'items',
+    'getKey',
+    'onRemove',
+    'size',
+    'variant',
+    'selectionMode',
+    'selectedKeys',
+    'onSelectionChange',
+    'disabledKeys',
+    'class',
+    'renderEmptyState',
+  ]);
+
+  const size = () => local.size ?? 'md';
+  const variant = () => local.variant ?? 'default';
+  const sizeConfig = () => sizeStyles[size()];
+  const variantConfig = () => variantStyles[variant()];
+
+  // Default getKey function
+  const getKey = (item: T): Key => {
+    if (local.getKey) return local.getKey(item);
+    if (item.id !== undefined) return item.id;
+    if (item.key !== undefined) return item.key;
+    return String(item);
+  };
+
+  return (
+    <div class={`flex flex-col gap-2 ${local.class ?? ''}`}>
+      <Show when={local.label}>
+        <span class={`font-medium text-primary-200 ${sizeConfig().label}`}>
+          {local.label}
+        </span>
+      </Show>
+      <HeadlessTagList
+        items={local.items}
+        getKey={getKey}
+        onRemove={local.onRemove}
+        selectionMode={local.selectionMode}
+        selectedKeys={local.selectedKeys}
+        onSelectionChange={local.onSelectionChange}
+        disabledKeys={local.disabledKeys}
+        class="flex flex-wrap gap-2"
+        renderEmptyState={local.renderEmptyState ?? (() => (
+          <span class="text-primary-400 text-sm italic">No items</span>
+        ))}
+      >
+        {(item) => (
+          <HeadlessTag
+            id={getKey(item)}
+            class={({ isSelected, isDisabled }) => {
+              const base = `
+                inline-flex items-center rounded-full
+                transition-colors duration-150 cursor-pointer
+                focus:outline-none focus:ring-2 focus:ring-accent/50
+                ${sizeConfig().tag}
+              `;
+              const variantClass = isSelected
+                ? variantConfig().selected
+                : variantConfig().tag;
+              const disabledClass = isDisabled ? variantConfig().disabled : '';
+              return `${base} ${variantClass} ${disabledClass}`.trim();
+            }}
+          >
+            {(renderProps) => (
+              <>
+                <span>{props.children(item)}</span>
+                <Show when={renderProps.allowsRemoving}>
+                  <button
+                    type="button"
+                    class={`
+                      ${sizeConfig().removeButton}
+                      rounded-full flex items-center justify-center
+                      hover:bg-black/20 transition-colors
+                      focus:outline-none
+                    `}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      local.onRemove?.(new Set([getKey(item)]));
+                    }}
+                    aria-label="Remove"
+                  >
+                    <svg
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      class="w-full h-full"
+                    >
+                      <line x1="18" y1="6" x2="6" y2="18" />
+                      <line x1="6" y1="6" x2="18" y2="18" />
+                    </svg>
+                  </button>
+                </Show>
+              </>
+            )}
+          </HeadlessTag>
+        )}
+      </HeadlessTagList>
+    </div>
+  );
+}
+
+// Re-export types
+export type { Key, SelectionMode };