@furystack/shades-common-components 12.0.1 → 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/index.ts

@@ -8,6 +8,7 @@ export * from './badge.js'
 export * from './breadcrumb.js'
 export * from './button-group.js'
 export * from './button.js'
+export * from './cache-view.js'
 export * from './card.js'
 export * from './carousel.js'
 export * from './chip.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/skeleton.spec.tsx

@@ -46,7 +46,7 @@ describe('Skeleton', () => {
     vi.restoreAllMocks()
   })
 
-  it('should render with shadow DOM', async () => {
+  it('should render with correct initial state and default delay', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -60,40 +60,13 @@ describe('Skeleton', () => {
 
       const skeleton = document.querySelector('shade-skeleton')
       expect(skeleton).not.toBeNull()
-    })
-  })
-
-  it('should have initial opacity of 0', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton />,
-      })
-
-      await sleepAsync(50)
 
-      const skeleton = document.querySelector('shade-skeleton') as HTMLElement
-      expect(skeleton).not.toBeNull()
+      const skeletonDiv = document.querySelector('shade-skeleton div') as HTMLElement
+      expect(skeletonDiv).not.toBeNull()
 
-      const computedStyle = window.getComputedStyle(skeleton)
+      const computedStyle = window.getComputedStyle(skeletonDiv)
       expect(computedStyle.opacity).toBe('0')
-    })
-  })
-
-  it('should use default delay of 1500ms', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton />,
-      })
-
-      await sleepAsync(50)
+      expect(computedStyle.display).toBe('inline-block')
 
       const fadeInCall = animateCalls.find(
         (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'opacity' in kf),
@@ -125,26 +98,6 @@ describe('Skeleton', () => {
     })
   })
 
-  it('should have correct css styles applied', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton />,
-      })
-
-      await sleepAsync(50)
-
-      const skeleton = document.querySelector('shade-skeleton') as HTMLElement
-      expect(skeleton).not.toBeNull()
-
-      const computedStyle = window.getComputedStyle(skeleton)
-      expect(computedStyle.display).toBe('inline-block')
-    })
-  })
-
   it('should start fade-in animation with correct parameters', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
@@ -175,7 +128,7 @@ describe('Skeleton', () => {
     })
   })
 
-  it('should start background animation after fade-in completes', async () => {
+  it('should start background animation with correct keyframes after fade-in completes', async () => {
     await usingAsync(new Injector(), async (injector) => {
       const rootElement = document.getElementById('root') as HTMLDivElement
 
@@ -196,26 +149,6 @@ describe('Skeleton', () => {
       const options = backgroundAnimation?.options as KeyframeAnimationOptions
       expect(options.duration).toBe(10000)
       expect(options.iterations).toBe(Infinity)
-    })
-  })
-
-  it('should have gradient background animation keyframes', async () => {
-    await usingAsync(new Injector(), async (injector) => {
-      const rootElement = document.getElementById('root') as HTMLDivElement
-
-      initializeShadeRoot({
-        injector,
-        rootElement,
-        jsxElement: <Skeleton delay={0} />,
-      })
-
-      await sleepAsync(100)
-
-      const backgroundAnimation = animateCalls.find(
-        (call) => Array.isArray(call.keyframes) && call.keyframes.some((kf: Keyframe) => 'backgroundPosition' in kf),
-      )
-
-      expect(backgroundAnimation).toBeDefined()
 
       const keyframes = backgroundAnimation?.keyframes as Keyframe[]
       expect(keyframes).toHaveLength(3)

package/src/components/skeleton.tsx

@@ -11,15 +11,6 @@ export type SkeletonProps = {
 
 export const Skeleton = Shade<SkeletonProps>({
   shadowDomName: 'shade-skeleton',
-  css: {
-    opacity: '0',
-    display: 'inline-block',
-    background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
-    backgroundSize: '400% 400%',
-    width: '100%',
-    height: '100%',
-    minHeight: '1em',
-  },
   render: ({ props, useRef }) => {
     const wrapperRef = useRef<HTMLDivElement>('wrapper')
     const { delay = 1500 } = props
@@ -49,8 +40,8 @@ export const Skeleton = Shade<SkeletonProps>({
         style={{
           opacity: '0',
           display: 'inline-block',
-          background: 'inherit',
-          backgroundSize: 'inherit',
+          background: `linear-gradient(-45deg, color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 30%, transparent), color-mix(in srgb, ${cssVariableTheme.text.secondary} 10%, transparent))`,
+          backgroundSize: '400% 400%',
           width: '100%',
           height: '100%',
           minHeight: '1em',

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