holie-vkit 1.1.7 → 1.1.8

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 (37) hide show
  1. package/dist/components/Alert.d.ts +7 -0
  2. package/dist/components/Alert.js +10 -0
  3. package/dist/components/Avatar.d.ts +9 -0
  4. package/dist/components/Avatar.js +4 -0
  5. package/dist/components/Badge.d.ts +7 -0
  6. package/dist/components/Badge.js +12 -0
  7. package/dist/components/Card.d.ts +9 -0
  8. package/dist/components/Card.js +7 -0
  9. package/dist/components/Checkbox.d.ts +6 -0
  10. package/dist/components/Checkbox.js +4 -0
  11. package/dist/components/Dialog.d.ts +9 -0
  12. package/dist/components/Dialog.js +6 -0
  13. package/dist/components/DropdownMenu.d.ts +12 -0
  14. package/dist/components/DropdownMenu.js +11 -0
  15. package/dist/components/LanguageSwitcher.d.ts +11 -1
  16. package/dist/components/LanguageSwitcher.js +3 -5
  17. package/dist/components/Popover.d.ts +7 -0
  18. package/dist/components/Popover.js +23 -0
  19. package/dist/components/Progress.d.ts +7 -0
  20. package/dist/components/Progress.js +5 -0
  21. package/dist/components/Sheet.d.ts +9 -0
  22. package/dist/components/Sheet.js +13 -0
  23. package/dist/components/Skeleton.d.ts +8 -0
  24. package/dist/components/Skeleton.js +4 -0
  25. package/dist/components/Table.d.ts +26 -0
  26. package/dist/components/Table.js +6 -0
  27. package/dist/components/Toast.d.ts +9 -0
  28. package/dist/components/Toast.js +17 -0
  29. package/dist/components/Tooltip.d.ts +7 -0
  30. package/dist/components/Tooltip.js +6 -0
  31. package/dist/hooks/useIsMobile.d.ts +1 -0
  32. package/dist/hooks/useIsMobile.js +12 -0
  33. package/dist/hooks/useMounted.d.ts +1 -0
  34. package/dist/hooks/useMounted.js +8 -0
  35. package/dist/hooks/useToast.d.ts +0 -0
  36. package/dist/hooks/useToast.js +2 -0
  37. package/package.json +4 -2
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ export interface AlertProps {
3
+ children: React.ReactNode;
4
+ type?: "info" | "success" | "warning" | "error";
5
+ className?: string;
6
+ }
7
+ export declare const Alert: React.FC<AlertProps>;
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ const typeStyles = {
3
+ info: "bg-blue-50 text-blue-800 border-blue-200",
4
+ success: "bg-green-50 text-green-800 border-green-200",
5
+ warning: "bg-yellow-50 text-yellow-800 border-yellow-200",
6
+ error: "bg-red-50 text-red-800 border-red-200",
7
+ };
8
+ export const Alert = ({ children, type = "info", className = '' }) => {
9
+ return (_jsx("div", { className: `border rounded px-4 py-3 ${typeStyles[type]} ${className}`, children: children }));
10
+ };
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ export interface AvatarProps {
3
+ src?: string;
4
+ alt?: string;
5
+ size?: number;
6
+ className?: string;
7
+ fallback?: React.ReactNode;
8
+ }
9
+ export declare const Avatar: React.FC<AvatarProps>;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ export const Avatar = ({ src, alt = "Avatar", size = 40, className = '', fallback }) => {
3
+ return (_jsx("span", { className: `inline-flex items-center justify-center rounded-full bg-gray-200 overflow-hidden ${className}`, style: { width: size, height: size }, children: src ? (_jsx("img", { src: src, alt: alt, className: "object-cover w-full h-full" })) : (fallback || _jsx("span", { className: "text-gray-500 text-sm", children: "?" })) }));
4
+ };
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ export interface BadgeProps {
3
+ children: React.ReactNode;
4
+ color?: "default" | "primary" | "secondary" | "success" | "warning" | "error";
5
+ className?: string;
6
+ }
7
+ export declare const Badge: React.FC<BadgeProps>;
@@ -0,0 +1,12 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ const colorStyles = {
3
+ default: "bg-gray-100 text-gray-800",
4
+ primary: "bg-blue-100 text-blue-800",
5
+ secondary: "bg-purple-100 text-purple-800",
6
+ success: "bg-green-100 text-green-800",
7
+ warning: "bg-yellow-100 text-yellow-800",
8
+ error: "bg-red-100 text-red-800",
9
+ };
10
+ export const Badge = ({ children, color = "default", className = '' }) => {
11
+ return (_jsx("span", { className: `inline-block px-2 py-0.5 rounded text-xs font-medium ${colorStyles[color]} ${className}`, children: children }));
12
+ };
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
3
+ children: React.ReactNode;
4
+ className?: string;
5
+ }
6
+ export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
7
+ export declare const CardHeader: ({ children, className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
8
+ export declare const CardContent: ({ children, className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
9
+ export declare const CardFooter: ({ children, className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ export const Card = React.forwardRef(({ children, className = '', ...props }, ref) => (_jsx("div", { ref: ref, className: `rounded-lg border bg-background text-foreground shadow-sm ${className}`, ...props, children: children })));
4
+ Card.displayName = 'Card';
5
+ export const CardHeader = ({ children, className = '', ...props }) => (_jsx("div", { className: `p-4 border-b ${className}`, ...props, children: children }));
6
+ export const CardContent = ({ children, className = '', ...props }) => (_jsx("div", { className: `p-4 ${className}`, ...props, children: children }));
7
+ export const CardFooter = ({ children, className = '', ...props }) => (_jsx("div", { className: `p-4 border-t ${className}`, ...props, children: children }));
@@ -0,0 +1,6 @@
1
+ import * as React from "react";
2
+ export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
3
+ label?: React.ReactNode;
4
+ className?: string;
5
+ }
6
+ export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ export const Checkbox = React.forwardRef(({ label, className = '', ...props }, ref) => (_jsxs("label", { className: `inline-flex items-center gap-2 cursor-pointer ${className}`, children: [_jsx("input", { ref: ref, type: "checkbox", className: "accent-primary", ...props }), label && _jsx("span", { children: label })] })));
4
+ Checkbox.displayName = 'Checkbox';
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ export interface DialogProps {
3
+ open: boolean;
4
+ onClose: () => void;
5
+ title?: React.ReactNode;
6
+ children: React.ReactNode;
7
+ className?: string;
8
+ }
9
+ export declare const Dialog: React.FC<DialogProps>;
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export const Dialog = ({ open, onClose, title, children, className = '' }) => {
3
+ if (!open)
4
+ return null;
5
+ return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "fixed inset-0 bg-black/40", onClick: onClose }), _jsxs("div", { className: `relative bg-white rounded shadow-lg p-6 z-10 min-w-[320px] max-w-full ${className}`, children: [title && _jsx("div", { className: "font-semibold text-lg mb-2", children: title }), children, _jsx("button", { className: "absolute top-2 right-2 text-gray-400 hover:text-gray-600", onClick: onClose, "aria-label": "Close", children: "\u00D7" })] })] }));
6
+ };
@@ -0,0 +1,12 @@
1
+ import * as React from "react";
2
+ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
3
+ export declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
4
+ export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
5
+ export declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
6
+ export declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
7
+ export declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
8
+ export declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
9
+ export declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
10
+ export declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
11
+ export declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
12
+ export declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,11 @@
1
+ import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
2
+ export const DropdownMenu = DropdownMenuPrimitive.Root;
3
+ export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
4
+ export const DropdownMenuContent = DropdownMenuPrimitive.Content;
5
+ export const DropdownMenuItem = DropdownMenuPrimitive.Item;
6
+ export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
7
+ export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
8
+ export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
9
+ export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
10
+ export const DropdownMenuSubTrigger = DropdownMenuPrimitive.SubTrigger;
11
+ export const DropdownMenuSubContent = DropdownMenuPrimitive.SubContent;
@@ -1,2 +1,12 @@
1
1
  import React from 'react';
2
- export declare const LanguageSwitcher: React.FC;
2
+ export interface LanguageSwitcherProps {
3
+ languages: {
4
+ code: string;
5
+ label: string;
6
+ flag?: string;
7
+ }[];
8
+ current: string;
9
+ onSelect: (lang: string) => void;
10
+ className?: string;
11
+ }
12
+ export declare const LanguageSwitcher: React.FC<LanguageSwitcherProps>;
@@ -1,6 +1,4 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- // Placeholder for shared LanguageSwitcher
3
- export const LanguageSwitcher = () => {
4
- // TODO: Implement shared logic or delegate to project-specific context
5
- return _jsx("div", { children: "Language Switcher (shared)" });
1
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
+ export const LanguageSwitcher = ({ languages, current, onSelect, className = '', }) => {
3
+ return (_jsx("div", { className: `relative ${className}`, children: _jsx("select", { className: "rounded px-2 py-1 border bg-background text-foreground", value: current, onChange: e => onSelect(e.target.value), "aria-label": "Select language", children: languages.map(lang => (_jsxs("option", { value: lang.code, children: [lang.flag ? `${lang.flag} ` : '', lang.label] }, lang.code))) }) }));
6
4
  };
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ export interface PopoverProps {
3
+ trigger: React.ReactNode;
4
+ content: React.ReactNode;
5
+ className?: string;
6
+ }
7
+ export declare const Popover: React.FC<PopoverProps>;
@@ -0,0 +1,23 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ export const Popover = ({ trigger, content, className = '' }) => {
4
+ const [open, setOpen] = React.useState(false);
5
+ const popoverRef = React.useRef(null);
6
+ React.useEffect(() => {
7
+ function handleClickOutside(event) {
8
+ if (popoverRef.current && !popoverRef.current.contains(event.target)) {
9
+ setOpen(false);
10
+ }
11
+ }
12
+ if (open) {
13
+ document.addEventListener("mousedown", handleClickOutside);
14
+ }
15
+ else {
16
+ document.removeEventListener("mousedown", handleClickOutside);
17
+ }
18
+ return () => {
19
+ document.removeEventListener("mousedown", handleClickOutside);
20
+ };
21
+ }, [open]);
22
+ return (_jsxs("span", { className: "relative inline-block", ref: popoverRef, children: [_jsx("span", { onClick: () => setOpen((v) => !v), children: trigger }), open && (_jsx("span", { className: `absolute z-50 left-1/2 -translate-x-1/2 mt-2 px-4 py-2 rounded bg-white border shadow-lg ${className}`, children: content }))] }));
23
+ };
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ export interface ProgressProps {
3
+ value: number;
4
+ max?: number;
5
+ className?: string;
6
+ }
7
+ export declare const Progress: React.FC<ProgressProps>;
@@ -0,0 +1,5 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ export const Progress = ({ value, max = 100, className = '' }) => {
3
+ const percent = Math.min(100, Math.max(0, (value / max) * 100));
4
+ return (_jsx("div", { className: `w-full bg-gray-200 rounded h-2 ${className}`, role: "progressbar", "aria-valuenow": value, "aria-valuemax": max, "aria-valuemin": 0, children: _jsx("div", { className: "bg-blue-500 h-2 rounded", style: { width: `${percent}%` } }) }));
5
+ };
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ export interface SheetProps {
3
+ open: boolean;
4
+ onClose: () => void;
5
+ children: React.ReactNode;
6
+ side?: "left" | "right" | "top" | "bottom";
7
+ className?: string;
8
+ }
9
+ export declare const Sheet: React.FC<SheetProps>;
@@ -0,0 +1,13 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ export const Sheet = ({ open, onClose, children, side = "right", className = '' }) => {
3
+ if (!open)
4
+ return null;
5
+ let positionClass = "right-0 top-0 h-full w-80";
6
+ if (side === "left")
7
+ positionClass = "left-0 top-0 h-full w-80";
8
+ if (side === "top")
9
+ positionClass = "top-0 left-0 w-full h-80";
10
+ if (side === "bottom")
11
+ positionClass = "bottom-0 left-0 w-full h-80";
12
+ return (_jsxs("div", { className: "fixed inset-0 z-50 flex", children: [_jsx("div", { className: "fixed inset-0 bg-black/40", onClick: onClose }), _jsx("div", { className: `fixed bg-white shadow-lg transition-all duration-300 ${positionClass} ${className}`, children: children })] }));
13
+ };
@@ -0,0 +1,8 @@
1
+ import * as React from "react";
2
+ export interface SkeletonProps {
3
+ width?: number | string;
4
+ height?: number | string;
5
+ className?: string;
6
+ style?: React.CSSProperties;
7
+ }
8
+ export declare const Skeleton: React.FC<SkeletonProps>;
@@ -0,0 +1,4 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ export const Skeleton = ({ width = '100%', height = 16, className = '', style }) => {
3
+ return (_jsx("span", { className: `inline-block bg-gray-200 animate-pulse rounded ${className}`, style: { width, height, ...style } }));
4
+ };
@@ -0,0 +1,26 @@
1
+ import * as React from "react";
2
+ export interface TableProps {
3
+ children: React.ReactNode;
4
+ className?: string;
5
+ }
6
+ export declare const Table: React.FC<TableProps>;
7
+ export interface TableHeadProps {
8
+ children: React.ReactNode;
9
+ className?: string;
10
+ }
11
+ export declare const TableHead: React.FC<TableHeadProps>;
12
+ export interface TableBodyProps {
13
+ children: React.ReactNode;
14
+ className?: string;
15
+ }
16
+ export declare const TableBody: React.FC<TableBodyProps>;
17
+ export interface TableRowProps {
18
+ children: React.ReactNode;
19
+ className?: string;
20
+ }
21
+ export declare const TableRow: React.FC<TableRowProps>;
22
+ export interface TableCellProps {
23
+ children: React.ReactNode;
24
+ className?: string;
25
+ }
26
+ export declare const TableCell: React.FC<TableCellProps>;
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ export const Table = ({ children, className = '' }) => (_jsx("div", { className: `overflow-x-auto ${className}`, children: _jsx("table", { className: "min-w-full border-collapse", children: children }) }));
3
+ export const TableHead = ({ children, className = '' }) => (_jsx("thead", { className: className, children: children }));
4
+ export const TableBody = ({ children, className = '' }) => (_jsx("tbody", { className: className, children: children }));
5
+ export const TableRow = ({ children, className = '' }) => (_jsx("tr", { className: className, children: children }));
6
+ export const TableCell = ({ children, className = '' }) => (_jsx("td", { className: `px-4 py-2 border-b ${className}`, children: children }));
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ export interface ToastProps {
3
+ message: string;
4
+ type?: "info" | "success" | "warning" | "error";
5
+ duration?: number;
6
+ onClose?: () => void;
7
+ className?: string;
8
+ }
9
+ export declare const Toast: React.FC<ToastProps>;
@@ -0,0 +1,17 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ const typeStyles = {
4
+ info: "bg-blue-500 text-white",
5
+ success: "bg-green-500 text-white",
6
+ warning: "bg-yellow-500 text-black",
7
+ error: "bg-red-500 text-white",
8
+ };
9
+ export const Toast = ({ message, type = "info", duration = 3000, onClose, className = '' }) => {
10
+ React.useEffect(() => {
11
+ if (!onClose)
12
+ return;
13
+ const timer = setTimeout(onClose, duration);
14
+ return () => clearTimeout(timer);
15
+ }, [onClose, duration]);
16
+ return (_jsx("div", { className: `fixed bottom-4 right-4 px-4 py-2 rounded shadow-lg z-50 ${typeStyles[type]} ${className}`, children: message }));
17
+ };
@@ -0,0 +1,7 @@
1
+ import * as React from "react";
2
+ export interface TooltipProps {
3
+ content: React.ReactNode;
4
+ children: React.ReactNode;
5
+ className?: string;
6
+ }
7
+ export declare const Tooltip: React.FC<TooltipProps>;
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ export const Tooltip = ({ content, children, className = '' }) => {
4
+ const [visible, setVisible] = React.useState(false);
5
+ return (_jsxs("span", { className: "relative inline-block", onMouseEnter: () => setVisible(true), onMouseLeave: () => setVisible(false), children: [children, visible && (_jsx("span", { className: `absolute z-50 left-1/2 -translate-x-1/2 mt-2 px-2 py-1 rounded bg-black text-white text-xs whitespace-nowrap ${className}`, children: content }))] }));
6
+ };
@@ -0,0 +1 @@
1
+ export declare function useIsMobile(breakpoint?: number): boolean;
@@ -0,0 +1,12 @@
1
+ import * as React from "react";
2
+ export function useIsMobile(breakpoint = 768) {
3
+ const [isMobile, setIsMobile] = React.useState(typeof window !== "undefined" ? window.innerWidth < breakpoint : false);
4
+ React.useEffect(() => {
5
+ function handleResize() {
6
+ setIsMobile(window.innerWidth < breakpoint);
7
+ }
8
+ window.addEventListener("resize", handleResize);
9
+ return () => window.removeEventListener("resize", handleResize);
10
+ }, [breakpoint]);
11
+ return isMobile;
12
+ }
@@ -0,0 +1 @@
1
+ export declare function useMounted(): boolean;
@@ -0,0 +1,8 @@
1
+ import * as React from "react";
2
+ export function useMounted() {
3
+ const [mounted, setMounted] = React.useState(false);
4
+ React.useEffect(() => {
5
+ setMounted(true);
6
+ }, []);
7
+ return mounted;
8
+ }
File without changes
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ // File intentionally removed. Use useToast.tsx instead.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "holie-vkit",
3
- "version": "1.1.7",
3
+ "version": "1.1.8",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "module": "dist/index.js",
@@ -11,8 +11,10 @@
11
11
  "build": "tsc"
12
12
  },
13
13
  "dependencies": {
14
+ "@radix-ui/react-dropdown-menu": "^2.1.16",
14
15
  "lucide-react": "^0.563.0",
15
- "react": "^18.0.0",
16
+ "react": "^19.2.4",
17
+ "react-dom": "^19.2.4",
16
18
  "zod": "^4.3.6"
17
19
  },
18
20
  "devDependencies": {