@furystack/shades-common-components 12.1.0 → 12.2.0

package/src/components/icons/icon-types.ts

@@ -8,6 +8,9 @@ export type IconPath = {
   fillRule?: 'evenodd' | 'nonzero'
 }
 
+/** Category for grouping icons in galleries */
+export type IconCategory = 'Actions' | 'Navigation' | 'Status' | 'Content' | 'UI' | 'Common'
+
 /**
  * Defines an icon as a set of SVG paths with rendering metadata.
  * Icons are lightweight objects containing only path data -- no embedded SVG markup.
@@ -45,4 +48,13 @@ export type IconDefinition = {
    * @default 2
    */
   strokeWidth?: number
+
+  /** Human-readable display name (e.g., "Check Circle", "Arrow Left") */
+  name?: string
+  /** Short description of the icon's intended use */
+  description?: string
+  /** Search keywords for filtering (e.g., ['dismiss', 'cancel', 'x'] for close) */
+  keywords?: string[]
+  /** Category for grouping in galleries */
+  category?: IconCategory
 }

package/src/components/icons/index.ts

@@ -1,4 +1,4 @@
-export type { IconDefinition, IconPath } from './icon-types.js'
+export type { IconCategory, IconDefinition, IconPath } from './icon-types.js'
 export { Icon } from './icon.js'
 export type { IconProps } from './icon.js'
 export * as icons from './icon-definitions.js'

package/src/components/page-container/index.tsx

@@ -30,7 +30,7 @@ export type PageContainerProps = {
  * ```tsx
  * <PageContainer maxWidth="800px" centered padding="48px" gap="24px">
  *   <PageHeader
- *     icon="👥"
+ *     icon={<Icon icon={icons.users} />}
  *     title="Users"
  *     description="Manage user accounts and their roles."
  *   />

package/src/components/page-container/page-header.tsx

@@ -6,8 +6,8 @@ import { Paper } from '../paper.js'
  * Props for the PageHeader component.
  */
 export type PageHeaderProps = {
-  /** Optional icon (emoji or single character) displayed before the title */
-  icon?: string
+  /** Optional icon displayed before the title (string or JSX element such as an Icon component) */
+  icon?: JSX.Element | string
   /** The page title */
   title: string
   /** Optional description text displayed below the title */
@@ -27,9 +27,9 @@ export type PageHeaderProps = {
  *
  * @example
  * ```tsx
- * // Simple header with icon and description
+ * // Header with an Icon component
  * <PageHeader
- *   icon="👥"
+ *   icon={<Icon icon={icons.users} />}
  *   title="Users"
  *   description="Manage user accounts and their roles."
  * />
@@ -39,7 +39,7 @@ export type PageHeaderProps = {
  * ```tsx
  * // Header with action buttons
  * <PageHeader
- *   icon="📁"
+ *   icon={<Icon icon={icons.folder} />}
  *   title="Projects"
  *   description="View and manage your projects."
  *   actions={

package/src/components/suggest/index.tsx

@@ -16,7 +16,7 @@ export * from './suggestion-list.js'
 export * from './suggestion-result.js'
 
 export interface SuggestProps<T> {
-  defaultPrefix: string
+  defaultPrefix: JSX.Element | string
   getEntries: (term: string) => Promise<T[]>
   getSuggestionEntry: (entry: T) => SuggestionResult
   onSelectSuggestion: (entry: T) => void