@etus/ui 0.1.0 → 0.1.2

package/src/components/advanced/Search/Search.types.ts

@@ -1,243 +0,0 @@
-// Search/Search.types.ts
-
-import type * as React from "react"
-
-/**
- * Individual search result item
- */
-export interface SearchResult {
-  /** Action to execute on selection */
-  action?: () => void
-  /** Optional description */
-  description?: string
-  /** Group category for result grouping */
-  group?: string
-  /** Optional link destination */
-  href?: string
-  /** Optional icon */
-  icon?: React.ReactNode
-  /** Unique identifier */
-  id: string
-  /** Keywords for search matching */
-  keywords?: string[]
-  /** Display title */
-  title: string
-}
-
-/**
- * Search filter definition
- */
-export interface SearchFilter {
-  /** Optional icon */
-  icon?: React.ReactNode
-  /** Unique identifier */
-  id: string
-  /** Display label */
-  label: string
-}
-
-/**
- * Grouped search results
- */
-export interface SearchGroup {
-  /** Unique identifier */
-  id: string
-  /** Display label */
-  label: string
-  /** Results in this group */
-  results: SearchResult[]
-}
-
-/**
- * Search component state
- */
-export type SearchState = "empty" | "error" | "idle" | "loading" | "results"
-
-/**
- * Search variant
- */
-export type SearchVariant = "command" | "fullscreen" | "inline"
-
-/**
- * Search size
- */
-export type SearchSize = "default" | "lg" | "sm"
-
-/**
- * Props for the main Search component
- */
-export interface SearchProps {
-  /** Currently active filter IDs */
-  activeFilters?: string[]
-  /** Auto focus input on mount */
-  autoFocus?: boolean
-  /** Additional class name */
-  className?: string
-  /** Debounce delay in ms */
-  debounce?: number
-  /** Default value for uncontrolled mode */
-  defaultValue?: string
-  /** Disabled state */
-  disabled?: boolean
-  /** Error state */
-  error?: boolean
-  /** Error message */
-  errorMessage?: string
-  /** Available filters */
-  filters?: SearchFilter[]
-  /** History items */
-  history?: SearchResult[]
-  /** Loading state */
-  loading?: boolean
-  /** Minimum characters before search */
-  minChars?: number
-  /** Callback when value changes */
-  onChange?: (value: string) => void
-  /** Callback to clear history */
-  onClearHistory?: () => void
-  /** Callback when filters change */
-  onFilterChange?: (filters: string[]) => void
-  /** Callback when open state changes */
-  onOpenChange?: (open: boolean) => void
-  /** Search function - can be sync or async */
-  onSearch?: (query: string) => Promise<SearchResult[]> | undefined
-  /** Callback when result is selected */
-  onSelect?: (result: SearchResult) => void
-  /** Controlled open state (for command variant) */
-  open?: boolean
-  /** Placeholder text */
-  placeholder?: string
-  /** Search results to display */
-  results?: SearchResult[]
-  /** Show search history */
-  showHistory?: boolean
-  /** Size */
-  size?: SearchSize
-  /** Controlled value */
-  value?: string
-  /** Variant style */
-  variant?: SearchVariant
-}
-
-/**
- * Props for SearchInput subcomponent
- */
-export interface SearchInputProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
-  /** Size variant */
-  size?: SearchSize
-}
-
-/**
- * Props for SearchResults container
- */
-export interface SearchResultsProps {
-  /** Children */
-  children?: React.ReactNode
-  /** Additional class name */
-  className?: string
-  /** Size variant */
-  size?: SearchSize
-}
-
-/**
- * Props for SearchResultItem
- */
-export interface SearchResultItemProps {
-  /** Additional class name */
-  className?: string
-  /** Callback on select */
-  onSelect?: (result: SearchResult) => void
-  /** Query for highlight matching */
-  query?: string
-  /** Result data */
-  result: SearchResult
-  /** Whether item is selected */
-  selected?: boolean
-  /** Size variant */
-  size?: SearchSize
-}
-
-/**
- * Props for SearchResultGroup
- */
-export interface SearchResultGroupProps {
-  /** Children (SearchResultItem) */
-  children?: React.ReactNode
-  /** Additional class name */
-  className?: string
-  /** Group label */
-  label: string
-  /** Size variant */
-  size?: SearchSize
-}
-
-/**
- * Props for SearchFilters
- */
-export interface SearchFiltersProps {
-  /** Active filter IDs */
-  activeFilters: string[]
-  /** Additional class name */
-  className?: string
-  /** Available filters */
-  filters: SearchFilter[]
-  /** Callback when filters change */
-  onFilterChange: (filters: string[]) => void
-  /** Size variant */
-  size?: SearchSize
-}
-
-/**
- * Props for SearchHistory
- */
-export interface SearchHistoryProps {
-  /** Additional class name */
-  className?: string
-  /** History items */
-  items: SearchResult[]
-  /** Callback to clear history */
-  onClear?: () => void
-  /** Callback on select */
-  onSelect?: (result: SearchResult) => void
-  /** Size variant */
-  size?: SearchSize
-}
-
-/**
- * Props for SearchEmpty
- */
-export interface SearchEmptyProps {
-  /** Children */
-  children?: React.ReactNode
-  /** Additional class name */
-  className?: string
-  /** Message to display */
-  message?: string
-  /** Size variant */
-  size?: SearchSize
-}
-
-/**
- * Props for SearchLoading
- */
-export interface SearchLoadingProps {
-  /** Additional class name */
-  className?: string
-  /** Message to display */
-  message?: string
-  /** Size variant */
-  size?: SearchSize
-}
-
-/**
- * Props for SearchHighlight utility
- */
-export interface SearchHighlightProps {
-  /** Additional class name for matches */
-  className?: string
-  /** Query to match */
-  query: string
-  /** Text to highlight */
-  text: string
-}

package/src/components/advanced/Search/Search.variants.ts

@@ -1,358 +0,0 @@
-// Search/Search.variants.ts
-import { cva, type VariantProps } from "class-variance-authority"
-
-/**
- * Search root container variants
- */
-export const searchVariants = cva(
-  // Base styles
-  ["relative flex flex-col"],
-  {
-    variants: {
-      variant: {
-        inline: ["w-full"],
-        fullscreen: [
-          "fixed inset-0 z-50",
-          "bg-background/80 backdrop-blur-sm",
-          "flex items-start justify-center pt-[20vh]",
-        ],
-        command: [
-          "bg-popover text-popover-foreground",
-          "rounded-lg border shadow-lg",
-          "overflow-hidden",
-        ],
-      },
-      size: {
-        sm: "",
-        default: "",
-        lg: "",
-      },
-    },
-    defaultVariants: {
-      variant: "inline",
-      size: "default",
-    },
-  }
-)
-
-/**
- * Search input wrapper variants
- */
-export const searchInputWrapperVariants = cva(
-  // Base styles
-  [
-    "relative flex items-center",
-    "bg-muted rounded-md border",
-    "focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
-    "transition-colors",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-8",
-        default: "h-10",
-        lg: "h-12",
-      },
-      variant: {
-        inline: "",
-        fullscreen: "max-w-2xl w-full mx-4",
-        command: "border-0 border-b rounded-none",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-      variant: "inline",
-    },
-  }
-)
-
-/**
- * Search input field variants
- */
-export const searchInputVariants = cva(
-  // Base styles
-  [
-    "flex-1 bg-transparent",
-    "placeholder:text-muted-foreground",
-    "focus:outline-none",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-8 px-2 py-1 text-xs",
-        default: "h-10 px-3 py-2 text-sm",
-        lg: "h-12 px-4 py-3 text-base",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-/**
- * Search icon variants
- */
-export const searchIconVariants = cva(
-  // Base styles
-  ["shrink-0 text-muted-foreground"],
-  {
-    variants: {
-      size: {
-        sm: "size-3.5 ml-2",
-        default: "size-4 ml-3",
-        lg: "size-5 ml-4",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-/**
- * Search results container variants
- */
-export const searchResultsVariants = cva(
-  // Base styles
-  [
-    "bg-popover text-popover-foreground",
-    "overflow-y-auto overflow-x-hidden",
-    "scroll-py-1",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "max-h-[200px]",
-        default: "max-h-[300px]",
-        lg: "max-h-[400px]",
-      },
-      variant: {
-        inline: [
-          "absolute left-0 right-0 top-full mt-1",
-          "z-50 rounded-md border shadow-md",
-        ],
-        fullscreen: [
-          "max-w-2xl w-full mx-4 mt-2",
-          "rounded-md border shadow-md",
-        ],
-        command: ["border-0"],
-      },
-    },
-    defaultVariants: {
-      size: "default",
-      variant: "inline",
-    },
-  }
-)
-
-/**
- * Search result item variants
- */
-export const searchResultItemVariants = cva(
-  // Base styles
-  [
-    "relative flex cursor-pointer items-center gap-2",
-    "rounded-sm outline-none select-none",
-    "transition-colors",
-    "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "px-2 py-1.5 text-xs",
-        default: "px-3 py-2 text-sm",
-        lg: "px-4 py-3 text-base",
-      },
-      selected: {
-        true: "bg-accent text-accent-foreground",
-        false: "hover:bg-accent/50",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-      selected: false,
-    },
-  }
-)
-
-/**
- * Search result icon variants
- */
-export const searchResultIconVariants = cva(
-  // Base styles
-  ["shrink-0 text-muted-foreground"],
-  {
-    variants: {
-      size: {
-        sm: "size-3.5",
-        default: "size-4",
-        lg: "size-5",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-/**
- * Search result group heading variants
- */
-export const searchGroupHeadingVariants = cva(
-  // Base styles
-  ["font-medium text-muted-foreground"],
-  {
-    variants: {
-      size: {
-        sm: "px-2 py-1 text-[10px]",
-        default: "px-3 py-1.5 text-xs",
-        lg: "px-4 py-2 text-sm",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-/**
- * Search empty state variants
- */
-export const searchEmptyVariants = cva(
-  // Base styles
-  ["flex items-center justify-center text-muted-foreground"],
-  {
-    variants: {
-      size: {
-        sm: "py-4 text-xs",
-        default: "py-6 text-sm",
-        lg: "py-8 text-base",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-/**
- * Search loading variants
- */
-export const searchLoadingVariants = cva(
-  // Base styles
-  ["flex items-center justify-center gap-2 text-muted-foreground"],
-  {
-    variants: {
-      size: {
-        sm: "py-4 text-xs",
-        default: "py-6 text-sm",
-        lg: "py-8 text-base",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-/**
- * Search filter button variants
- */
-export const searchFilterVariants = cva(
-  // Base styles
-  [
-    "inline-flex items-center gap-1",
-    "rounded-full border",
-    "transition-colors",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-  ],
-  {
-    variants: {
-      size: {
-        sm: "px-2 py-0.5 text-xs",
-        default: "px-2.5 py-1 text-xs",
-        lg: "px-3 py-1.5 text-sm",
-      },
-      active: {
-        true: "bg-primary text-primary-foreground border-primary",
-        false: "bg-muted hover:bg-accent",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-      active: false,
-    },
-  }
-)
-
-/**
- * Search filters container variants
- */
-export const searchFiltersContainerVariants = cva(
-  // Base styles
-  ["flex flex-wrap gap-1"],
-  {
-    variants: {
-      size: {
-        sm: "py-1 px-2",
-        default: "py-2 px-3",
-        lg: "py-3 px-4",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-/**
- * Search history header variants
- */
-export const searchHistoryHeaderVariants = cva(
-  // Base styles
-  ["flex items-center justify-between text-muted-foreground"],
-  {
-    variants: {
-      size: {
-        sm: "px-2 py-1 text-[10px]",
-        default: "px-3 py-1.5 text-xs",
-        lg: "px-4 py-2 text-sm",
-      },
-    },
-    defaultVariants: {
-      size: "default",
-    },
-  }
-)
-
-/**
- * Search highlight match variants
- */
-export const searchHighlightVariants = cva(
-  // Base styles for highlighted text
-  ["text-primary font-semibold bg-primary/10 rounded-sm px-0.5"]
-)
-
-// Export variant prop types
-export type SearchVariantProps = VariantProps<typeof searchVariants>
-export type SearchInputWrapperVariantProps = VariantProps<
-  typeof searchInputWrapperVariants
->
-export type SearchInputVariantProps = VariantProps<typeof searchInputVariants>
-export type SearchIconVariantProps = VariantProps<typeof searchIconVariants>
-export type SearchResultsVariantProps = VariantProps<
-  typeof searchResultsVariants
->
-export type SearchResultItemVariantProps = VariantProps<
-  typeof searchResultItemVariants
->
-export type SearchGroupHeadingVariantProps = VariantProps<
-  typeof searchGroupHeadingVariants
->
-export type SearchEmptyVariantProps = VariantProps<typeof searchEmptyVariants>
-export type SearchLoadingVariantProps = VariantProps<
-  typeof searchLoadingVariants
->
-export type SearchFilterVariantProps = VariantProps<typeof searchFilterVariants>

package/src/components/advanced/Search/index.ts

@@ -1,52 +0,0 @@
-// Search/index.ts
-
-// Types - Note: SearchInputProps is not exported to avoid conflict with forms/SearchInput
-export type {
-  SearchEmptyProps,
-  SearchFilter,
-  SearchFiltersProps,
-  SearchGroup,
-  SearchHighlightProps,
-  SearchHistoryProps,
-  SearchLoadingProps,
-  SearchProps,
-  SearchResult,
-  SearchResultGroupProps,
-  SearchResultItemProps,
-  SearchResultsProps,
-  SearchSize,
-  SearchState,
-  SearchVariant,
-} from "./Search.types"
-
-// Variants - Note: searchIconVariants is not exported to avoid conflict with forms/SearchInput
-export {
-  searchEmptyVariants,
-  searchFiltersContainerVariants,
-  searchFilterVariants,
-  searchGroupHeadingVariants,
-  searchHighlightVariants,
-  searchHistoryHeaderVariants,
-  searchInputVariants,
-  searchInputWrapperVariants,
-  searchLoadingVariants,
-  searchResultIconVariants,
-  searchResultItemVariants,
-  searchResultsVariants,
-  searchVariants,
-} from "./Search.variants"
-
-// Components - Note: SearchInput is not exported to avoid conflict with forms/SearchInput
-// Use AdvancedSearchInput if standalone search input is needed
-export {
-  AdvancedSearchInput,
-  Search,
-  SearchEmpty,
-  SearchFilters,
-  SearchHighlight,
-  SearchHistory,
-  SearchLoading,
-  SearchResultGroup,
-  SearchResultItem,
-  SearchResults,
-} from "./Search"