@lp-labs/ui-components 0.0.0-stage → 1.0.0

package/dist/cjs/components/Video.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
+  src: string;
+  poster?: string;
+  width?: number | string;
+  height?: number | string;
+  controls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  aspect?: 'square' | 'video' | 'auto';
+  rounded?: boolean;
+  shadow?: boolean;
+  className?: string;
+}
+
+export const Video = React.forwardRef<HTMLVideoElement, VideoProps>(
+  (
+    {
+      src,
+      poster,
+      width,
+      height,
+      controls = true,
+      autoPlay = false,
+      loop = false,
+      muted = false,
+      aspect = 'video',
+      rounded = false,
+      shadow = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const aspectClasses = {
+      square: 'aspect-square',
+      video: 'aspect-video',
+      auto: 'auto',
+    };
+
+    return (
+      <div
+        className={cn(
+          'relative bg-black',
+          aspectClasses[aspect] !== 'auto' && aspectClasses[aspect],
+          {
+            'rounded-lg overflow-hidden': rounded,
+            'shadow-lg': shadow,
+          },
+          aspect === 'auto' && !height && 'w-full'
+        )}
+        style={{
+          width: typeof width === 'number' ? `${width}px` : width,
+          height: typeof height === 'number' ? `${height}px` : height,
+        }}
+      >
+        <video
+          ref={ref}
+          src={src}
+          poster={poster}
+          controls={controls}
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          className={cn(
+            'w-full h-full',
+            {
+              'rounded-lg': rounded,
+            },
+            className
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+Video.displayName = 'Video';

package/dist/cjs/components/Video.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { cn } from '../utilities/classNames';
+
+export interface VideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
+  src: string;
+  poster?: string;
+  width?: number | string;
+  height?: number | string;
+  controls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  aspect?: 'square' | 'video' | 'auto';
+  rounded?: boolean;
+  shadow?: boolean;
+  className?: string;
+}
+
+export const Video = React.forwardRef<HTMLVideoElement, VideoProps>(
+  (
+    {
+      src,
+      poster,
+      width,
+      height,
+      controls = true,
+      autoPlay = false,
+      loop = false,
+      muted = false,
+      aspect = 'video',
+      rounded = false,
+      shadow = false,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const aspectClasses = {
+      square: 'aspect-square',
+      video: 'aspect-video',
+      auto: 'auto',
+    };
+
+    return (
+      <div
+        className={cn(
+          'relative bg-black',
+          aspectClasses[aspect] !== 'auto' && aspectClasses[aspect],
+          {
+            'rounded-lg overflow-hidden': rounded,
+            'shadow-lg': shadow,
+          },
+          aspect === 'auto' && !height && 'w-full'
+        )}
+        style={{
+          width: typeof width === 'number' ? `${width}px` : width,
+          height: typeof height === 'number' ? `${height}px` : height,
+        }}
+      >
+        <video
+          ref={ref}
+          src={src}
+          poster={poster}
+          controls={controls}
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          className={cn(
+            'w-full h-full',
+            {
+              'rounded-lg': rounded,
+            },
+            className
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+
+Video.displayName = 'Video';

package/dist/cjs/components/index.d.ts

@@ -0,0 +1,311 @@
+// ============================================
+// CORE COMPONENTS (Existing v3.0.0)
+// ============================================
+
+export { Button } from './Button';
+export type { ButtonProps } from './Button';
+
+export { Card } from './Card';
+export type { CardProps } from './Card';
+
+export { Input } from './Input';
+export type { InputProps } from './Input';
+
+export { Modal, ModalHeader, ModalBody, ModalFooter } from './Modal';
+export type { ModalProps, ModalHeaderProps, ModalBodyProps, ModalFooterProps } from './Modal';
+
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge';
+
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';
+
+export { Dropdown, DropdownItem, DropdownMenu } from './Dropdown';
+export type { DropdownProps, DropdownItemProps, DropdownMenuProps } from './Dropdown';
+
+export { Navbar, NavbarBrand, NavbarNav, NavbarItem, NavbarToggle } from './Navbar';
+export type { NavbarProps, NavbarBrandProps, NavbarNavProps, NavbarItemProps, NavbarToggleProps } from './Navbar';
+
+// Form Components
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';
+
+export { Radio, RadioGroup } from './Radio';
+export type { RadioProps, RadioGroupProps } from './Radio';
+
+export { Select } from './Select';
+export type { SelectProps } from './Select';
+
+export { Textarea } from './Textarea';
+export type { TextareaProps } from './Textarea';
+
+export { Slider } from './Slider';
+export type { SliderProps } from './Slider';
+
+// Display Components
+export { Tabs, TabList, TabTrigger, TabContent } from './Tabs';
+export type { TabsProps, TabListProps, TabTriggerProps, TabContentProps } from './Tabs';
+
+export { Progress } from './Progress';
+export type { ProgressProps } from './Progress';
+
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner';
+
+// ============================================
+// NEW v4.0.0 COMPONENTS (160+)
+// ============================================
+
+// ============================================
+// 1. BUTTON VARIANTS (7 components)
+// ============================================
+export {
+  ButtonPrimary,
+  ButtonSecondary,
+  ButtonOutline,
+  ButtonGhost,
+  ButtonLink,
+  ButtonIcon,
+  ButtonLoading,
+} from './ButtonVariants';
+export type { ButtonVariantProps } from './ButtonVariants';
+
+// ============================================
+// 2. FORM INPUT VARIANTS (9 components)
+// ============================================
+export {
+  InputText,
+  InputEmail,
+  InputPassword,
+  InputNumber,
+  InputDate,
+  InputTime,
+  InputTel,
+  InputUrl,
+  InputSearch,
+} from './FormInputVariants';
+export type { FormInputProps } from './FormInputVariants';
+
+// ============================================
+// 3. CARD VARIANTS (8 components)
+// ============================================
+export {
+  CardBasic,
+  CardImage,
+  CardHorizontal,
+  CardExpanding,
+  CardInteractive,
+  CardGradient,
+  CardMinimal,
+  CardBordered,
+} from './CardVariants';
+export type { CardVariantProps } from './CardVariants';
+
+// ============================================
+// 4. MODAL TYPES (7 components)
+// ============================================
+export {
+  ModalStandard,
+  ModalAlert,
+  ModalConfirm,
+  ModalSidebar,
+  ModalFullscreen,
+  ModalCentered,
+  ModalScrollable,
+} from './ModalTypes';
+export type { ModalTypeProps } from './ModalTypes';
+
+// ============================================
+// 5. NAVIGATION COMPONENTS (8 components)
+// ============================================
+export {
+  NavHorizontal,
+  NavVertical,
+  NavTabs,
+  NavPills,
+  NavBreadcrumbs,
+  NavSteps,
+  NavTree,
+  NavMegamenu,
+} from './NavigationComponents';
+export type { NavigationProps, NavItem } from './NavigationComponents';
+
+// ============================================
+// 6. DATA DISPLAY COMPONENTS (5 components)
+// ============================================
+export {
+  TableBasic,
+  TableSortable,
+  TableFilterable,
+  TableExpandable,
+  TableCompact,
+} from './DataDisplayComponents';
+export type { DataDisplayProps, TableColumn, TableData } from './DataDisplayComponents';
+
+// ============================================
+// 7. LAYOUT & GRID COMPONENTS (10 components)
+// ============================================
+export {
+  GridAuto,
+  GridResponsive,
+  GridMasonry,
+  GridFixedCol,
+  GridDynamic,
+  GridNested,
+  GridAligned,
+  Container,
+  Flex,
+  Stack,
+  AspectRatio,
+} from './LayoutComponents';
+export type { GridProps } from './LayoutComponents';
+
+// ============================================
+// 8. TYPOGRAPHY COMPONENTS (9 components)
+// ============================================
+export {
+  Heading,
+  Paragraph,
+  Quote,
+  Code,
+  Label,
+  Caption,
+  Badge as BadgeTypography,
+  Text,
+  Truncated,
+} from './TypographyComponents';
+export type { TypographyProps } from './TypographyComponents';
+
+// ============================================
+// 9. LOADING & FEEDBACK COMPONENTS (13 components)
+// ============================================
+export {
+  SpinnerDots,
+  SpinnerRing,
+  SpinnerBar,
+  SpinnerBounce,
+  SpinnerPulse,
+  SkeletonText,
+  SkeletonCard,
+  SkeletonImage,
+  SkeletonTable,
+  ProgressLinear,
+  ProgressCircular,
+  ProgressStepped,
+  Overlay,
+} from './LoadingFeedbackComponents';
+export type { LoadingProps } from './LoadingFeedbackComponents';
+
+// ============================================
+// 10. UTILITY COMPONENTS (11 components)
+// ============================================
+export {
+  Tooltip,
+  Popover,
+  ContextMenu,
+  Notification,
+  Badge as BadgeUtility,
+  Pill,
+  Tag as TagUtility,
+  Chip as ChipUtility,
+  Counter,
+  Flag,
+} from './UtilityComponents';
+export type { UtilityComponentProps } from './UtilityComponents';
+
+// ============================================
+// 11. ADVANCED COMPONENTS (7 components)
+// ============================================
+export {
+  FormBuilder,
+  TableBuilder,
+  Dashboard,
+  Wizard,
+  KanbanBoard,
+  Timeline as TimelineAdvanced,
+  OrgChart,
+} from './AdvancedComponents';
+export type { AdvancedComponentProps } from './AdvancedComponents';
+
+export { Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+
+export { Avatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
+
+export { Rating } from './Rating';
+export type { RatingProps } from './Rating';
+
+export { Toggle } from './Toggle';
+export type { ToggleProps } from './Toggle';
+
+export { Pagination } from './Pagination';
+export type { PaginationProps } from './Pagination';
+
+export { Breadcrumb } from './Breadcrumb';
+export type { BreadcrumbProps } from './Breadcrumb';
+
+export { Accordion } from './Accordion';
+export type { AccordionProps } from './Accordion';
+
+export { Divider } from './Divider';
+export type { DividerProps } from './Divider';
+
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps } from './Skeleton';
+
+// Data Table & Timeline
+export { Table } from './Table';
+export type { TableProps, TableColumn } from './Table';
+
+export { Timeline, TimelineItem } from './Timeline';
+export type { TimelineProps, TimelineItemProps } from './Timeline';
+
+// Notifications
+export { Toast, ToastProvider, useToast, ToastContext } from './Toast';
+export type { ToastProps, ToastContextType } from './Toast';
+
+// Popover & Menu
+export { Popover } from './Popover';
+export type { PopoverProps } from './Popover';
+
+export { Menu, MenuItem } from './Menu';
+export type { MenuProps, MenuItemProps } from './Menu';
+
+// Layout
+export { Sidebar, SidebarItem } from './Sidebar';
+export type { SidebarProps, SidebarItemProps } from './Sidebar';
+
+export { Stack } from './Stack';
+export type { StackProps } from './Stack';
+
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
+
+// Forms
+export { Form } from './Form';
+export type { FormProps } from './Form';
+
+export { FormGroup } from './FormGroup';
+export type { FormGroupProps } from './FormGroup';
+
+export { Stepper } from './Stepper';
+export type { StepperProps, StepProps } from './Stepper';
+
+// UI Elements
+export { Chip } from './Chip';
+export type { ChipProps } from './Chip';
+
+export { Tag } from './Tag';
+export type { TagProps } from './Tag';
+
+// Media
+export { Image } from './Image';
+export type { ImageProps } from './Image';
+
+export { Video } from './Video';
+export type { VideoProps } from './Video';
+
+// Navigation
+export { Link } from './Link';
+export type { LinkProps } from './Link';