@wakastellar/ui 2.0.0 → 2.1.1

package/src/components/index.ts

@@ -0,0 +1,368 @@
+// Export all components
+export * from './accordion'
+export * from './alert-dialog'
+export * from './alert'
+export * from './aspect-ratio'
+export * from './avatar'
+export * from './badge'
+export * from './button'
+export * from './calendar'
+export * from './card'
+export * from './checkbox'
+export { Code } from './code'
+export * from './collapsible'
+export * from './command'
+export * from './context-menu'
+export * from './dialog'
+export * from './dropdown-menu'
+export * from './form'
+export * from './hover-card'
+export * from './input-otp'
+export * from './input'
+export * from './label'
+export * from './language-selector'
+export * from './menubar'
+export * from './navigation-menu'
+export * from './popover'
+export * from './progress'
+export * from './radio-group'
+export * from './scroll-area'
+export * from './select'
+export * from './separator'
+export * from './sheet'
+export * from './skeleton'
+export * from './slider'
+export * from './switch'
+export * from './table'
+export * from './tabs'
+export * from './textarea'
+export * from './theme-selector'
+export * from './toast'
+export * from './toaster'
+export * from './toggle'
+export * from './tooltip'
+export * from './typography'
+export * from './DataTable'
+
+// Waka Components
+export * from './waka-admincrumb'
+export * from './waka-autocomplete'
+export * from './waka-barcode'
+export * from './waka-breadcrumb'
+export * from './waka-carousel'
+export * from './waka-charts'
+export * from './waka-color-picker'
+export * from './waka-combobox'
+export * from './waka-date-range-picker'
+export * from './waka-datetime-picker'
+export * from './waka-datetime-picker.form-integration'
+export * from './waka-drawer'
+export * from './waka-file-upload'
+export * from './waka-image'
+export * from './waka-kanban'
+export * from './waka-modal'
+export * from './waka-welcome-modal'
+export * from './waka-notifications'
+export * from './waka-number-input'
+export * from './waka-pagination'
+export * from './waka-qrcode'
+export * from './waka-rich-text-editor'
+export * from './waka-segmented-control'
+export * from './waka-spinner'
+export * from './waka-stat'
+export * from './waka-stepper'
+export * from './waka-theme-creator'
+export * from './waka-theme-manager'
+export * from './waka-time-picker'
+export * from './waka-timeline'
+export * from './waka-tree'
+export * from './waka-video'
+export * from './waka-virtual-list'
+
+// Mobile-first Interactive Components
+export * from './waka-swipe-card'
+export * from './waka-pull-to-refresh'
+export * from './waka-bottom-sheet'
+export * from './waka-haptic-button'
+export * from './waka-morph-button'
+
+// Animated Button Components
+export * from './waka-liquid-button'
+export * from './waka-magnetic-button'
+
+// Text Animation Components
+export * from './waka-typewriter'
+
+// Navigation Components
+export * from './waka-floating-nav'
+export * from './waka-breadcrumb-path'
+export * from './waka-tabs-morph'
+
+// Interactive Menu Components
+export * from './waka-orbital-menu'
+
+// Data Visualization Components
+export * from './waka-radar-score'
+export { Waka3DPieChart, type PieSlice } from './waka-3d-pie-chart'
+export * from './waka-resource-gauge'
+export * from './waka-status-matrix'
+export * from './waka-contribution-graph'
+export * from './waka-cost-breakdown'
+export * from './waka-budget-burn'
+
+// Feedback & Animation Components
+export * from './waka-success-explosion'
+export * from './waka-skeleton-wave'
+export * from './waka-error-shake'
+export * from './waka-loading-orbit'
+
+// Gamification Components
+export * from './waka-achievement-unlock'
+export * from './waka-combo-counter'
+export * from './waka-level-progress'
+export * from './waka-leaderboard'
+export * from './waka-milestone-road'
+export * from './waka-streak-counter'
+export * from './waka-quest-card'
+export * from './waka-scratch-card'
+export * from './waka-versus-card'
+
+// Command & Search Components
+export { WakaCommandBar, useCommandBar, type CommandCategory } from './waka-command-bar'
+export type { CommandItem as WakaCommandItem } from './waka-command-bar'
+export * from './waka-spotlight'
+
+// Card Effects Components
+export * from './waka-glow-card'
+export * from './waka-tilt-card'
+export * from './waka-magic-link'
+
+// Dock & Navigation Components
+export * from './waka-dock'
+export * from './waka-flow-diagram'
+export * from './waka-pipeline-view'
+
+// Deployment & DevOps Components
+export * from './waka-rollback-slider'
+
+// Cloud Infrastructure Visualization
+export * from './waka-region-map'
+
+// Infrastructure & Monitoring Components
+export * from './waka-server-rack'
+export * from './waka-network-topology'
+export * from './waka-health-pulse'
+export * from './waka-metric-sparkline'
+export * from './waka-terminal-output'
+export * from './waka-incident-timeline'
+
+// Resource Management Components
+export * from './waka-resource-pool'
+export * from './waka-quota-bar'
+export * from './waka-capacity-planner'
+export * from './waka-allocation-matrix'
+
+// Workflow & Pipeline Components
+export * from './waka-deployment-lane'
+export * from './waka-approval-chain'
+export * from './waka-connection-matrix'
+
+// Alert & SLA Components
+export {
+  WakaAlertStack,
+  useAlertStack,
+  type Alert as WakaAlert,
+  type AlertSeverity,
+  type WakaAlertStackProps,
+} from './waka-alert-stack'
+export * from './waka-sla-tracker'
+
+// Gamification - Progression Components
+export * from './waka-xp-bar'
+export {
+  WakaBadgeShowcase,
+  WakaBadgeShowcaseCompact,
+  WakaBadgeShowcaseList,
+  WakaBadgeShowcaseHero,
+  WakaBadgeStats,
+  type Badge as WakaBadge,
+  type BadgeRarity,
+  type WakaBadgeShowcaseProps,
+} from './waka-badge-showcase'
+export * from './waka-daily-reward'
+export * from './waka-loot-box'
+export * from './waka-skill-tree'
+export {
+  WakaChallengeTimer,
+  WakaChallengeTimerSkeleton,
+  useChallengeTimer,
+  type Challenge as WakaChallenge,
+  type ChallengeTask,
+  type ChallengeReward as WakaChallengeReward,
+  type WakaChallengeTimerProps,
+  type TimeRemaining,
+} from './waka-challenge-timer'
+
+// Gamification - Social & Competition Components
+export * from './waka-rank-badge'
+export * from './waka-tournament-bracket'
+export * from './waka-team-banner'
+export {
+  WakaActivityFeed,
+  useActivityFeed,
+  type Activity as WakaActivity,
+  type ActivityType as WakaActivityType,
+  type ActivityUser as WakaActivityUser,
+  type WakaActivityFeedProps,
+} from './waka-activity-feed'
+
+// Gamification - Engagement Components
+export * from './waka-power-up'
+export * from './waka-points-popup'
+export * from './waka-spin-wheel'
+
+// Gamification - Stats & Profile Components
+export * from './waka-player-card'
+export * from './waka-stats-hexagon'
+export * from './waka-season-pass'
+
+// Presence & Status Components
+export {
+  WakaPresenceIndicator,
+  WakaPresenceWithAvatar,
+  WakaPresenceStatusBadge,
+  WakaPresenceSelector,
+  WakaPresenceLastSeen,
+  WakaPresenceCard,
+  WakaPresenceList,
+  WakaPresenceAvatarStack,
+  usePresence,
+  type PresenceStatus,
+  type PresenceState,
+  type PresenceUser,
+  type UsePresenceOptions,
+  type UsePresenceReturn,
+  type WakaPresenceIndicatorProps,
+  type WakaPresenceWithAvatarProps,
+  type WakaPresenceStatusBadgeProps,
+  type WakaPresenceSelectorProps,
+  type WakaPresenceLastSeenProps,
+  type WakaPresenceCardProps,
+  type WakaPresenceListProps,
+  type WakaPresenceAvatarStackProps,
+} from './waka-presence-indicator'
+
+// Payment & E-commerce Components
+export * from './waka-payment-method-picker'
+export * from './waka-product-card'
+
+// Security & Authentication Components
+export * from './waka-two-factor-setup'
+
+// Input Components
+export {
+  WakaMentionInput,
+  useMentionInput,
+  type MentionUser,
+  type MentionChannel,
+  type MentionItem,
+  type MentionTrigger,
+  type InsertedMention,
+  type WakaMentionInputProps,
+  type UseMentionInputOptions,
+  type UseMentionInputReturn,
+} from './waka-mention-input'
+
+// Period Comparison Components
+export {
+  WakaComparePeriod,
+  useComparePeriod,
+  type PeriodPreset,
+  type TrendDirection,
+  type PeriodRange,
+  type MetricValue,
+  type Metric,
+  type ComparePeriodSummary,
+  type WakaComparePeriodProps,
+  type UseComparePeriodOptions,
+  type UseComparePeriodReturn,
+} from './waka-compare-period'
+
+// E-commerce Components
+export * from './waka-pricing-table'
+export * from './waka-cart-summary'
+export * from './waka-checkout-stepper'
+export * from './waka-coupon-input'
+export * from './waka-order-tracker'
+export * from './waka-invoice-preview'
+
+// Security & Authentication Components
+export * from './waka-password-strength'
+export * from './waka-session-manager'
+export * from './waka-permission-matrix'
+export * from './waka-audit-log'
+export * from './waka-security-score'
+export * from './waka-biometric-prompt'
+export * from './waka-device-trust'
+
+// Communication & Collaboration Components
+export * from './waka-chat-bubble'
+export * from './waka-typing-indicator'
+export * from './waka-video-call'
+export * from './waka-thread-view'
+export * from './waka-reaction-picker'
+export * from './waka-voice-message'
+
+// Analytics & Reporting Components
+export * from './waka-funnel-chart'
+export * from './waka-cohort-table'
+export * from './waka-kpi-dashboard'
+export * from './waka-goal-progress'
+export * from './waka-heatmap'
+export * from './waka-sankey-diagram'
+export * from './waka-treemap-chart'
+
+// Advanced Form Components
+export * from './waka-signature-pad'
+export * from './waka-address-autocomplete'
+export * from './waka-phone-input'
+export * from './waka-credit-card-input'
+export * from './waka-tag-input'
+export * from './waka-slider-range'
+export * from './waka-rating-input'
+export * from './waka-schedule-picker'
+
+// Onboarding & Guidance Components
+export * from './waka-tour-guide'
+export * from './waka-hotspot'
+export * from './waka-checklist'
+export {
+  WakaEmptyState,
+  WakaEmptyStateSearch,
+  WakaEmptyStateError,
+  useEmptyState,
+  type WakaEmptyStateProps,
+  type WakaEmptyStateSearchProps,
+  type WakaEmptyStateErrorProps,
+  type UseEmptyStateOptions,
+  type UseEmptyStateReturn,
+  type EmptyStateVariant,
+  type EmptyStateSize,
+  type EmptyStateLayout,
+  type EmptyStateAction,
+  type BuiltInIllustration,
+} from './waka-empty-state'
+export * from './waka-feature-announcement'
+export * from './waka-progress-onboarding'
+
+// WakaTooltipTour is deprecated - use WakaTourGuide with variant="tooltip" instead
+// Keeping export for backward compatibility
+export {
+  WakaTooltipTour,
+  useTooltipTour,
+  type WakaTooltipTourProps,
+  type TourStep as TooltipTourStep,
+  type TooltipPlacement,
+  type UseTooltipTourOptions,
+  type UseTooltipTourReturn,
+} from './waka-tooltip-tour'

package/src/components/input/Input.stories.tsx

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Input } from './index'
+import { Search, Mail, Eye, EyeOff } from 'lucide-react'
+import { useState } from 'react'
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A customizable input component.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email', 'password', 'number', 'search', 'tel', 'url'],
+    },
+    disabled: {
+      control: 'boolean',
+    },
+    placeholder: {
+      control: 'text',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof Input>
+
+export const Default: Story = {
+  args: {
+    placeholder: 'Enter text...',
+  },
+}
+
+export const Types: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-80">
+      <Input type="text" placeholder="Text input" />
+      <Input type="email" placeholder="Email input" />
+      <Input type="password" placeholder="Password input" />
+      <Input type="number" placeholder="Number input" />
+      <Input type="search" placeholder="Search input" />
+    </div>
+  ),
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2 w-80">
+      <label htmlFor="email" className="text-sm font-medium">
+        Email
+      </label>
+      <Input id="email" type="email" placeholder="name@example.com" />
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    placeholder: 'Disabled input',
+    disabled: true,
+  },
+}
+
+export const WithIcon: Story = {
+  render: () => (
+    <div className="relative w-80">
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+      <Input className="pl-10" placeholder="Search..." />
+    </div>
+  ),
+}
+
+export const File: Story = {
+  render: () => (
+    <div className="w-80">
+      <Input type="file" />
+    </div>
+  ),
+}
+
+export const States: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-80">
+      <Input placeholder="Normal" />
+      <Input placeholder="Disabled" disabled />
+      <Input placeholder="Read only" readOnly value="Read only value" />
+      <Input
+        placeholder="Error state"
+        className="border-red-500 focus-visible:ring-red-500"
+      />
+    </div>
+  ),
+}

package/src/components/input/index.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
+