@kawaiininja/ui 1.0.3 → 1.0.4

package/dist/components/settings/SettingRow.d.ts

@@ -19,5 +19,5 @@ interface SettingRowProps {
 /**
  * A standard row for settings interfaces, featuring an icon, label, description, and action area.
  */
-export declare const SettingRow: React.FC<SettingRowProps>;
+export declare const SettingRow: React.ForwardRefExoticComponent<SettingRowProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/settings/SettingRow.js

@@ -1,5 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 /**
  * A standard row for settings interfaces, featuring an icon, label, description, and action area.
  */
-export const SettingRow = ({ icon: Icon, label, description, children, onClick, className = "", }) => (_jsxs("div", { onClick: onClick, className: `flex items-center justify-between p-4 border-b border-zinc-800 last:border-0 hover:bg-zinc-800/30 transition-colors ${onClick ? "cursor-pointer" : ""} ${className}`, children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "p-2 bg-zinc-800 rounded-lg text-blue-500", children: _jsx(Icon, { size: 20 }) }), _jsxs("div", { children: [_jsx("p", { className: "text-zinc-100 font-medium", children: label }), description && _jsx("p", { className: "text-zinc-500 text-xs", children: description })] })] }), _jsx("div", { className: "flex items-center", children: children })] }));
+export const SettingRow = React.forwardRef(({ icon: Icon, label, description, children, onClick, className = "" }, ref) => (_jsxs("div", { ref: ref, onClick: onClick, className: `flex items-center justify-between p-4 border-b border-zinc-800 last:border-0 hover:bg-zinc-800/30 transition-colors ${onClick ? "cursor-pointer" : ""} ${className}`, children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "p-2 bg-zinc-800 rounded-lg text-blue-500", children: _jsx(Icon, { size: 20 }) }), _jsxs("div", { children: [_jsx("p", { className: "text-zinc-100 font-medium", children: label }), description && (_jsx("p", { className: "text-zinc-500 text-xs", children: description }))] })] }), _jsx("div", { className: "flex items-center", children: children })] })));
+SettingRow.displayName = "SettingRow";

package/dist/components/toggle/BloomToggle.d.ts

@@ -7,5 +7,5 @@ interface ToggleProps {
 /**
  * A minimalist toggle with a circular "bloom" animation effect.
  */
-export declare const BloomToggle: React.FC<ToggleProps>;
+export declare const BloomToggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/toggle/BloomToggle.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 /**
  * A minimalist toggle with a circular "bloom" animation effect.
  */
-export const BloomToggle = ({ enabled, setEnabled, className = "", }) => (_jsxs("button", { onClick: () => setEnabled(!enabled), className: `relative w-12 h-12 flex items-center justify-center ${className}`, children: [_jsx("div", { className: `absolute inset-0 rounded-full transition-all duration-700 ${enabled
+export const BloomToggle = React.forwardRef(({ enabled, setEnabled, className = "" }, ref) => (_jsxs("button", { ref: ref, onClick: () => setEnabled(!enabled), className: `relative w-12 h-12 flex items-center justify-center ${className}`, children: [_jsx("div", { className: `absolute inset-0 rounded-full transition-all duration-700 ${enabled
                 ? "bg-[#FF8A1F]/20 scale-100 opacity-100"
                 : "bg-transparent scale-0 opacity-0"}` }), _jsx("div", { className: `w-4 h-4 rounded-full border-2 transition-all duration-500 ${enabled
                 ? "bg-[#FF8A1F] border-transparent scale-125"
-                : "bg-transparent border-blue-500 scale-100"}` })] }));
+                : "bg-transparent border-blue-500 scale-100"}` })] })));
+BloomToggle.displayName = "BloomToggle";

package/dist/components/toggle/CrosshairToggle.d.ts

@@ -7,5 +7,5 @@ interface ToggleProps {
 /**
  * A unique crosshair-style toggle with tactical UI elements and corner indicators.
  */
-export declare const CrosshairToggle: React.FC<ToggleProps>;
+export declare const CrosshairToggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/toggle/CrosshairToggle.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 /**
  * A unique crosshair-style toggle with tactical UI elements and corner indicators.
  */
-export const CrosshairToggle = ({ enabled, setEnabled, className = "", }) => (_jsxs("button", { onClick: () => setEnabled(!enabled), className: `relative w-12 h-12 flex items-center justify-center group ${className}`, children: [_jsx("div", { className: `absolute top-0 left-0 w-3 h-3 border-t-2 border-l-2 transition-all duration-300 ${enabled
+export const CrosshairToggle = React.forwardRef(({ enabled, setEnabled, className = "" }, ref) => (_jsxs("button", { ref: ref, onClick: () => setEnabled(!enabled), className: `relative w-12 h-12 flex items-center justify-center group ${className}`, children: [_jsx("div", { className: `absolute top-0 left-0 w-3 h-3 border-t-2 border-l-2 transition-all duration-300 ${enabled
                 ? "border-[#FF8A1F] translate-x-2 translate-y-2"
                 : "border-blue-500/30"}` }), _jsx("div", { className: `absolute top-0 right-0 w-3 h-3 border-t-2 border-r-2 transition-all duration-300 ${enabled
                 ? "border-[#FF8A1F] -translate-x-2 translate-y-2"
@@ -12,4 +13,5 @@ export const CrosshairToggle = ({ enabled, setEnabled, className = "", }) => (_j
                 ? "border-[#FF8A1F] -translate-x-2 -translate-y-2"
                 : "border-blue-500/30"}` }), _jsx("div", { className: `w-1 h-1 rounded-full transition-all duration-300 ${enabled
                 ? "bg-[#FF8A1F] scale-[3] shadow-[0_0_10px_#FF8A1F]"
-                : "bg-blue-500/20 scale-100"}` })] }));
+                : "bg-blue-500/20 scale-100"}` })] })));
+CrosshairToggle.displayName = "CrosshairToggle";

package/dist/components/toggle/Toggle.d.ts

@@ -7,5 +7,5 @@ interface ToggleProps {
 /**
  * A sleek, modern toggle switch with a sliding indicator and subtle glow effects.
  */
-export declare const Toggle: React.FC<ToggleProps>;
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/toggle/Toggle.js

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
 /**
  * A sleek, modern toggle switch with a sliding indicator and subtle glow effects.
  */
-export const Toggle = ({ enabled, setEnabled, className = "", }) => (_jsxs("button", { onClick: () => setEnabled(!enabled), className: `relative w-14 h-6 border transition-all duration-300 overflow-hidden ${enabled ? "border-[#FF8A1F]" : "border-blue-500/30"} ${className}`, children: [_jsx("div", { className: `absolute inset-y-0 left-0 transition-all duration-500 bg-[#FF8A1F]/20 ${enabled ? "w-full" : "w-0"}` }), _jsx("div", { className: `absolute top-0 bottom-0 w-4 transition-all duration-300 flex items-center justify-center ${enabled
+export const Toggle = React.forwardRef(({ enabled, setEnabled, className = "" }, ref) => (_jsxs("button", { ref: ref, onClick: () => setEnabled(!enabled), className: `relative w-14 h-6 border transition-all duration-300 overflow-hidden ${enabled ? "border-[#FF8A1F]" : "border-blue-500/30"} ${className}`, children: [_jsx("div", { className: `absolute inset-y-0 left-0 transition-all duration-500 bg-[#FF8A1F]/20 ${enabled ? "w-full" : "w-0"}` }), _jsx("div", { className: `absolute top-0 bottom-0 w-4 transition-all duration-300 flex items-center justify-center ${enabled
                 ? "left-10 bg-[#FF8A1F] shadow-[-4px_0_12px_#FF8A1F]"
-                : "left-0 bg-blue-500"}`, children: _jsx("div", { className: "w-[1px] h-3 bg-black/30" }) })] }));
+                : "left-0 bg-blue-500"}`, children: _jsx("div", { className: "w-[1px] h-3 bg-black/30" }) })] })));
+Toggle.displayName = "Toggle";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kawaiininja/ui",
-    "version": "1.0.3",
+    "version": "1.0.4",
     "description": "A modern React component library with 45+ premium components for building beautiful web applications",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",