next-helios-fe 1.8.104 → 1.8.106

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.104",
+  "version": "1.8.106",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/content-container/tab/index.tsx

@@ -100,7 +100,7 @@ export const Tab: TabComponent = ({
             })}
           </div>
           {cornerComponent && (
-            <div className="flex items-center px-4 border-s">
+            <div className="flex items-center px-2 border-s">
               {cornerComponent}
             </div>
           )}

package/src/components/dropdown/index.tsx

@@ -1,20 +1,12 @@
 "use client";
 import React from "react";
-import { Dropdown as Dd } from "flowbite-react";
+import { Dropdown as Dd, DropdownProps as Dp } from "flowbite-react";
 import { Header, type HeaderProps } from "./header";
 import { Item, type ItemProps } from "./item";
 
-interface DropdownProps {
-  children: React.ReactNode;
-  placement?:
-    | "top"
-    | "top-start"
-    | "top-end"
-    | "bottom"
-    | "bottom-start"
-    | "bottom-end";
-  dismissOnClick?: boolean;
+interface DropdownProps extends Omit<Dp, "label" | "trigger"> {
   trigger?: React.ReactNode;
+  actionTrigger?: "click" | "hover";
 }
 
 interface DropdownComponent extends React.FC<DropdownProps> {
@@ -23,12 +15,11 @@ interface DropdownComponent extends React.FC<DropdownProps> {
 }
 
 export const Dropdown: DropdownComponent = ({
-  children,
-  placement,
-  dismissOnClick,
   trigger,
+  actionTrigger,
+  ...rest
 }) => {
-  const childrenList = React.Children.toArray(children);
+  const childrenList = React.Children.toArray(rest.children);
   const header = childrenList.find((child) => {
     return (child as React.ReactElement).type === Dropdown.Header;
   });
@@ -40,8 +31,7 @@ export const Dropdown: DropdownComponent = ({
     <Dd
       label=""
       className="w-min max-h-96 px-1 z-20 rounded-md border-default bg-secondary-bg overflow-x-hidden overflow-y-auto"
-      placement={placement || "bottom-end"}
-      dismissOnClick={dismissOnClick ?? true}
+      dismissOnClick={rest.dismissOnClick ?? true}
       theme={{
         floating: {
           header: "px-4 py-2 text-sm !text-default",
@@ -55,12 +45,14 @@ export const Dropdown: DropdownComponent = ({
         },
       }}
       renderTrigger={() => <div>{trigger}</div>}
+      trigger={actionTrigger || "click"}
+      {...rest}
     >
       {header}
       {itemList}
       {childrenList.length > 0 && !header && itemList.length === 0 && (
         <Dd.Item className="flex flex-col cursor-default" as="div">
-          {children}
+          {rest.children}
         </Dd.Item>
       )}
     </Dd>

package/src/components/dropdown/item.tsx

@@ -1,13 +1,12 @@
 "use client";
 import React from "react";
-import { Dropdown as Dd } from "flowbite-react";
+import { Dropdown as Dd, DropdownItemProps } from "flowbite-react";
 
-export interface ItemProps {
+export interface ItemProps extends Omit<DropdownItemProps, "as"> {
   children: React.ReactNode;
   active?: boolean;
   as?: "button" | "title";
   disabled?: boolean;
-  onClick?: () => void;
 }
 
 export const Item: React.FC<ItemProps> = ({
@@ -15,7 +14,7 @@ export const Item: React.FC<ItemProps> = ({
   active,
   as,
   disabled,
-  onClick,
+  ...rest
 }) => {
   return (
     <Dd.Item
@@ -25,9 +24,9 @@ export const Item: React.FC<ItemProps> = ({
           : `disabled:text-disabled ${
               as === "title" ? "" : "hover:bg-secondary-light"
             }`
-      } outline-0`}
+      }`}
       disabled={active ? true : (disabled || as === "title") ?? false}
-      onClick={onClick}
+      {...rest}
     >
       {children}
     </Dd.Item>

package/src/components/form/input/checkbox.tsx

@@ -46,10 +46,16 @@ export const Checkbox: React.FC<CheckboxProps> = ({
         <input
           ref={inputRef}
           type="checkbox"
-          className={`border-default border rounded bg-secondary-bg cursor-pointer indeterminate:bg-primary indeterminate:hover:bg-primary indeterminate:disabled:bg-secondary-dark checked:bg-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
+          className={`border-default border rounded bg-secondary-bg cursor-pointer indeterminate:bg-primary indeterminate:hover:bg-primary indeterminate:disabled:bg-secondary-dark checked:bg-primary focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0 focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
             theme && "border-0"
           }`}
           style={{ backgroundColor: theme }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              inputRef.current?.click();
+            }
+          }}
           {...rest}
         />
       </div>
@@ -72,13 +78,18 @@ export const Checkbox: React.FC<CheckboxProps> = ({
           )}
         </div>
       )}
-      <div
-        className={`flex items-center justify-start w-8 h-5 border rounded-full bg-secondary-bg overflow-hidden cursor-pointer duration-300 group-has-[:checked]/checkbox:justify-end group-has-[:checked]/checkbox:bg-primary group-has-[:disabled:checked]/checkbox:bg-secondary-dark ${
+      <button
+        type="button"
+        className={`flex items-center justify-start w-8 h-5 border rounded-full bg-secondary-bg overflow-hidden cursor-pointer duration-300 group-has-[:checked]/checkbox:justify-end group-has-[:checked]/checkbox:bg-primary group-has-[:disabled]/checkbox:bg-secondary-light group-has-[:disabled:checked]/checkbox:bg-secondary-dark focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0 focus:shadow focus:shadow-primary focus:border-primary-dark ${
           options?.variant !== "switch" && "hidden"
         }`}
+        disabled={rest.disabled}
+        onClick={() => {
+          inputRef.current?.click();
+        }}
       >
         <div className="w-4 h-4 rounded-full bg-secondary duration-300 group-has-[:checked]/checkbox:bg-secondary-bg group-has-[:disabled]/checkbox:bg-secondary-dark group-has-[:disabled:checked]/checkbox:bg-secondary-bg"></div>
-      </div>
+      </button>
     </label>
   );
 };

package/src/components/form/input/color.tsx

@@ -92,6 +92,7 @@ export const Color: React.FC<ColorProps> = ({
             ref={inputRef}
             type="color"
             className="absolute -bottom-2.5 -z-10"
+            tabIndex={-1}
             value={tempValue}
             onChange={(e) => setTempValue(e.target.value.toUpperCase())}
             {...rest}

package/src/components/form/input/radio.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useRef } from "react";
 import { Tooltip } from "../../../components";
 import { Icon } from "@iconify/react";
 
@@ -20,6 +20,8 @@ export const Radio: React.FC<RadioProps> = ({
   theme,
   ...rest
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
   return (
     <label
       className={`flex items-center w-fit ${
@@ -35,11 +37,18 @@ export const Radio: React.FC<RadioProps> = ({
         }`}
       >
         <input
+          ref={inputRef}
           type="radio"
-          className={`border-default border bg-secondary-bg cursor-pointer checked:bg-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
+          className={`border-default border bg-secondary-bg cursor-pointer checked:bg-primary focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0 focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:checked:bg-secondary-dark disabled:cursor-default ${
             theme && "border-0"
           }`}
           style={{ backgroundColor: theme }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              inputRef.current?.click();
+            }
+          }}
           {...rest}
         />
       </div>

package/src/components/form/input/range.tsx

@@ -63,7 +63,7 @@ export const Range: React.FC<RangeProps> = ({
         <input
           ref={inputRef}
           type="range"
-          className={`flex-1 border-default border cursor-pointer accent-primary focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:accent-secondary-dark disabled:cursor-default ${
+          className={`flex-1 border border-default rounded-md cursor-pointer accent-primary focus:outline-none focus:ring-0 focus:ring-offset-0 focus:accent-primary-dark disabled:accent-secondary-dark disabled:cursor-default ${
             theme && "border-0"
           }`}
           style={{ accentColor: theme }}