npm - ui-lab-registry - Versions diffs - 0.3.0 → 0.3.2 - Mend

ui-lab-registry 0.3.0 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (569) hide show

package/src/components/Path/examples/01-basic-breadcrumbs.tsx DELETED Viewed

@@ -1,17 +0,0 @@
-import { PathItem, Path } from 'ui-lab-components';
-export const metadata = {
-  title: 'Basic Path',
-  description: 'A simple path navigation showing the current page location. Use this to help users understand their position in the site hierarchy.'
-};
-export default function Example() {
-  return (
-    <Path>
-      <PathItem href="/">Home</PathItem>
-      <PathItem href="/products">Products</PathItem>
-      <PathItem href="/products/electronics">Electronics</PathItem>
-      <PathItem>Laptop</PathItem>
-    </Path>
-  );
-}

package/src/providers/Theme/examples/01-provider-setup.tsx DELETED Viewed

@@ -1,37 +0,0 @@
-/**
- * EXAMPLE: Provider Setup
- * Wrap your application root in ThemeProvider to enable theme support.
- * This should be placed at the very top level of your app.
- *
- * File: app/providers.tsx
- */
-// 'use client'
-// import React from 'react'
-// import { ThemeProvider } from '@ui/providers'
-//
-// export function Providers({ children }: { children: React.ReactNode }) {
-//   return <ThemeProvider>{children}</ThemeProvider>
-// }
-/**
- * Then in app/layout.tsx:
- *
- * import { Providers } from './providers'
- *
- * export default function RootLayout({ children }: { children: React.ReactNode }) {
- *   return (
- *     <html>
- *       <body>
- *         <Providers>{children}</Providers>
- *       </body>
- *     </html>
- *   )
- * }
- */
-export const metadata = {
-  title: 'Provider Setup',
-  description: 'Wrap your app root in ThemeProvider to enable theme support',
-  category: 'setup' as const,
-}

package/src/providers/Theme/examples/02-toggle-component.tsx DELETED Viewed

@@ -1,52 +0,0 @@
-/**
- * EXAMPLE: Theme Toggle Component
- * Theme toggle button component.
- * Displays the current theme and allows users to switch between light and dark modes.
- *
- * File: components/theme-toggle.tsx
- */
-// 'use client'
-// import { useTheme } from '@ui/providers'
-// import { Button } from 'ui-lab-components'
-//
-// export function ThemeToggle() {
-//   const { themeMode, toggleThemeMode } = useTheme()
-//
-//   return (
-//     <Button
-//       variant="ghost"
-//       size="sm"
-//       onPress={toggleThemeMode}
-//       aria-label={`Switch to ${themeMode === 'dark' ? 'light' : 'dark'} mode`}
-//     >
-//       {themeMode === 'dark' ? '☀️ Light' : '🌙 Dark'}
-//     </Button>
-//   )
-// }
-/**
- * Alternative: Theme indicator (read-only)
- * Shows current theme without toggle capability
- *
- * 'use client'
- * import { useTheme } from '@ui/providers'
- *
- * export function ThemeIndicator() {
- *   const { themeMode, themeSource } = useTheme()
- *
- *   return (
- *     <div className="flex items-center gap-2 text-foreground-400 text-sm">
- *       <span>{themeMode === 'dark' ? '🌙' : '☀️'}</span>
- *       <span className="capitalize">{themeMode} mode</span>
- *       {themeSource === 'device' && <span className="text-foreground-400">(device)</span>}
- *     </div>
- *   )
- * }
- */
-export const metadata = {
-  title: 'Theme Toggle Component',
-  description: 'Create a toggle button to switch between light and dark modes',
-  category: 'usage' as const,
-}

package/src/providers/Theme/examples/03-advanced-patterns.tsx DELETED Viewed

@@ -1,138 +0,0 @@
-/**
- * EXAMPLE: Advanced Theme Patterns
- * Programmatic control, conditional rendering, and smooth transitions
- */
-/**
- * 1. Programmatic theme control
- * Set theme to a specific mode based on user preference or application logic
- *
- * 'use client'
- * import { useTheme } from '@ui/providers'
- * import { Button } from 'ui-lab-components'
- *
- * export function ThemeControlPanel() {
- *   const { themeMode, setThemeMode, resetToDevicePreference } = useTheme()
- *
- *   return (
- *     <div className="flex gap-2">
- *       <Button
- *         variant={themeMode === 'light' ? 'primary' : 'outline'}
- *         onPress={() => setThemeMode('light')}
- *       >
- *         Light
- *       </Button>
- *       <Button
- *         variant={themeMode === 'dark' ? 'primary' : 'outline'}
- *         onPress={() => setThemeMode('dark')}
- *       >
- *         Dark
- *       </Button>
- *       <Button variant="ghost" onPress={resetToDevicePreference}>
- *         Reset to Device
- *       </Button>
- *     </div>
- *   )
- * }
- */
-/**
- * 2. Conditional rendering based on theme
- * Show different content or styling based on current theme mode
- *
- * 'use client'
- * import { useThemeMode } from '@ui/providers'
- *
- * export function ThemeAwareContent() {
- *   const themeMode = useThemeMode()
- *
- *   return (
- *     <div className="p-4 border border-background-700 rounded-lg">
- *       {themeMode === 'light' ? (
- *         <div className="bg-background-100 text-foreground-400">
- *           <h2>Light Mode Content</h2>
- *           <p>This content is optimized for light mode viewing.</p>
- *         </div>
- *       ) : (
- *         <div className="bg-background-900 text-foreground-50">
- *           <h2>Dark Mode Content</h2>
- *           <p>This content is optimized for dark mode viewing.</p>
- *         </div>
- *       )}
- *     </div>
- *   )
- * }
- */
-/**
- * 3. Smooth theme transitions using View Transition API
- * Creates animated transitions when switching themes
- *
- * 'use client'
- * import { useTheme } from '@ui/providers'
- * import { Button } from 'ui-lab-components'
- *
- * export function SmoothThemeToggle() {
- *   const { themeMode, toggleThemeMode } = useTheme()
- *
- *   const handleToggleWithTransition = () => {
- *     if (!('startViewTransition' in document)) {
- *       toggleThemeMode()
- *       return
- *     }
- *     (document as any).startViewTransition(() => {
- *       toggleThemeMode()
- *     })
- *   }
- *
- *   return (
- *     <Button
- *       variant="ghost"
- *       onPress={handleToggleWithTransition}
- *       className="transition-colors duration-200"
- *     >
- *       {themeMode === 'dark' ? '☀️' : '🌙'}
- *     </Button>
- *   )
- * }
- */
-/**
- * 4. Full theme information display
- * Show comprehensive theme state including device preference and manual overrides
- *
- * 'use client'
- * import { useTheme } from '@ui/providers'
- *
- * export function ThemeStatusDisplay() {
- *   const { themeMode, themeSource, devicePreference } = useTheme()
- *
- *   return (
- *     <div className="space-y-2 p-4 bg-background-800 rounded-lg text-foreground-100 text-sm">
- *       <div className="flex justify-between">
- *         <span>Active Mode:</span>
- *         <span className="font-mono">{themeMode}</span>
- *       </div>
- *       <div className="flex justify-between">
- *         <span>Source:</span>
- *         <span className="font-mono capitalize">{themeSource}</span>
- *       </div>
- *       <div className="flex justify-between">
- *         <span>Device Preference:</span>
- *         <span className="font-mono capitalize">{devicePreference}</span>
- *       </div>
- *       {themeSource === 'manual' && (
- *         <div className="mt-2 p-2 bg-accent-900 rounded text-accent-200 text-xs">
- *           ℹ️ Override active: Theme is manually set, ignoring device preference
- *         </div>
- *       )}
- *     </div>
- *   )
- * }
- */
-export const metadata = {
-  title: 'Advanced Theme Patterns',
-  description: 'Programmatic control, conditional rendering, and smooth transitions',
-  category: 'advanced' as const,
-}

package/src/providers/Theme/examples/index.ts DELETED Viewed

@@ -1,3 +0,0 @@
-export { metadata as providerSetupMetadata } from './01-provider-setup'
-export { metadata as toggleMetadata } from './02-toggle-component'
-export { metadata as advancedMetadata } from './03-advanced-patterns'