@sikka/hawa 0.19.39-next → 0.19.40-next

package/dist/index.css

@@ -1631,6 +1631,9 @@ input[type="number"]::-webkit-inner-spin-button,
   width: -moz-max-content;
   width: max-content;
 }
+.hawa-w-px {
+  width: 1px;
+}
 .hawa-w-screen {
   width: 100vw;
 }
@@ -3605,16 +3608,11 @@ body {
 .hawa-group.destructive .group-\[\.destructive\]\:focus\:hawa-ring-offset-red-600:focus {
   --tw-ring-offset-color: #dc2626;
 }
-.hawa-peer:checked ~ .peer-checked\:hawa-border-blue-600 {
-  --tw-border-opacity: 1;
-  border-color: rgb(37 99 235 / var(--tw-border-opacity));
-}
 .hawa-peer:checked ~ .peer-checked\:hawa-border-primary {
   border-color: hsl(var(--primary));
 }
-.hawa-peer:checked ~ .peer-checked\:hawa-text-blue-600 {
-  --tw-text-opacity: 1;
-  color: rgb(37 99 235 / var(--tw-text-opacity));
+.hawa-peer:checked ~ .peer-checked\:hawa-text-primary {
+  color: hsl(var(--primary));
 }
 .hawa-peer:checked ~ .peer-checked\:hawa-ring-4 {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);

package/dist/index.d.mts

@@ -354,8 +354,9 @@ type RadioOptionsTypes = {
 type RadioTypes = {
     orientation?: OrientationType;
     design?: "default" | "tabs" | "cards" | "bordered";
-    options: RadioOptionsTypes[];
     width?: "default" | "full" | "none";
+    size?: "default" | "lg" | "sm" | "xs";
+    options: RadioOptionsTypes[];
     onChangeTab?: any;
     defaultValue?: any;
     direction?: DirectionType;

package/dist/index.d.ts

@@ -354,8 +354,9 @@ type RadioOptionsTypes = {
 type RadioTypes = {
     orientation?: OrientationType;
     design?: "default" | "tabs" | "cards" | "bordered";
-    options: RadioOptionsTypes[];
     width?: "default" | "full" | "none";
+    size?: "default" | "lg" | "sm" | "xs";
+    options: RadioOptionsTypes[];
     onChangeTab?: any;
     defaultValue?: any;
     direction?: DirectionType;

package/dist/index.js

@@ -3608,6 +3608,7 @@ var import_react14 = __toESM(require("react"));
 var Radio = ({
   design = "default",
   width = "default",
+  size = "default",
   orientation = "horizontal",
   labelProps,
   tabsContainerClassName,
@@ -3615,12 +3616,18 @@ var Radio = ({
 }) => {
   var _a, _b, _c;
   const [selectedOption, setSelectedOption] = (0, import_react14.useState)(props.defaultValue);
-  let activeTabStyle = "hawa-inline-block hawa-py-2 hawa-px-4  hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary";
-  let inactiveTabStyle = "hawa-inline-block hawa-py-2 hawa-px-4 hawa-w-full hawa-transition-all hover:hawa-bg-muted hawa-bg-primary-foreground dark:hover:hawa-text-white";
+  let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary";
+  let inactiveTabStyle = "hawa-inline-block hawa-w-full hawa-transition-all hover:hawa-bg-muted hawa-bg-primary-foreground dark:hover:hawa-text-white";
   let orientationStyle = {
     horizontal: "hawa-flex hawa-flex-row",
     vertical: "hawa-flex hawa-flex-col"
   };
+  let tabSizeStyle = {
+    default: "hawa-py-2 hawa-px-4 hawa-text-sm",
+    lg: "hawa-py-2 hawa-px-4",
+    sm: "hawa-p-1.5 hawa-text-xs",
+    xs: "hawa-p-1 hawa-text-[10px]"
+  };
   let widthStyle = {
     none: "",
     default: "hawa-max-w-fit",
@@ -3646,7 +3653,7 @@ var Radio = ({
           ref: parentRef,
           className: cn(
             props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
-            "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-text-sm hawa-font-medium",
+            "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium",
             orientationStyle[orientation],
             widthStyle[width],
             tabsContainerClassName
@@ -3669,6 +3676,7 @@ var Radio = ({
               orientation === "horizontal" && parentDirection === "ltr" && "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
               orientation === "horizontal" && parentDirection === "rtl" && "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
               orientation === "vertical" && "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
+              tabSizeStyle[size],
               "hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
               selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
             ),
@@ -3734,7 +3742,7 @@ var Radio = ({
         {
           htmlFor: opt.value.toString(),
           className: cn(
-            "hawa-inline-flex hawa-h-full hawa-w-full  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-blue-600 peer-checked:hawa-text-blue-600 dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
+            "hawa-inline-flex hawa-h-full hawa-w-full  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
             opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-gray-100 hover:hawa-text-gray-600 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-gray-300"
           )
         },

package/dist/index.mjs

@@ -3375,6 +3375,7 @@ import React20, { useState as useState6, useRef as useRef3, useEffect as useEffe
 var Radio = ({
   design = "default",
   width = "default",
+  size = "default",
   orientation = "horizontal",
   labelProps,
   tabsContainerClassName,
@@ -3382,12 +3383,18 @@ var Radio = ({
 }) => {
   var _a, _b, _c;
   const [selectedOption, setSelectedOption] = useState6(props.defaultValue);
-  let activeTabStyle = "hawa-inline-block hawa-py-2 hawa-px-4  hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary";
-  let inactiveTabStyle = "hawa-inline-block hawa-py-2 hawa-px-4 hawa-w-full hawa-transition-all hover:hawa-bg-muted hawa-bg-primary-foreground dark:hover:hawa-text-white";
+  let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary  hawa-active dark:hawa-bg-primary";
+  let inactiveTabStyle = "hawa-inline-block hawa-w-full hawa-transition-all hover:hawa-bg-muted hawa-bg-primary-foreground dark:hover:hawa-text-white";
   let orientationStyle = {
     horizontal: "hawa-flex hawa-flex-row",
     vertical: "hawa-flex hawa-flex-col"
   };
+  let tabSizeStyle = {
+    default: "hawa-py-2 hawa-px-4 hawa-text-sm",
+    lg: "hawa-py-2 hawa-px-4",
+    sm: "hawa-p-1.5 hawa-text-xs",
+    xs: "hawa-p-1 hawa-text-[10px]"
+  };
   let widthStyle = {
     none: "",
     default: "hawa-max-w-fit",
@@ -3413,7 +3420,7 @@ var Radio = ({
           ref: parentRef,
           className: cn(
             props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
-            "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-text-sm hawa-font-medium",
+            "hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium",
             orientationStyle[orientation],
             widthStyle[width],
             tabsContainerClassName
@@ -3436,6 +3443,7 @@ var Radio = ({
               orientation === "horizontal" && parentDirection === "ltr" && "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
               orientation === "horizontal" && parentDirection === "rtl" && "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
               orientation === "vertical" && "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
+              tabSizeStyle[size],
               "hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
               selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
             ),
@@ -3501,7 +3509,7 @@ var Radio = ({
         {
           htmlFor: opt.value.toString(),
           className: cn(
-            "hawa-inline-flex hawa-h-full hawa-w-full  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-blue-600 peer-checked:hawa-text-blue-600 dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
+            "hawa-inline-flex hawa-h-full hawa-w-full  hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-gray-200 hawa-bg-white hawa-p-5 hawa-text-gray-500  peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-gray-700 dark:hawa-bg-gray-800 dark:hawa-text-gray-400  dark:peer-checked:hawa-text-primary",
             opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-gray-100 hover:hawa-text-gray-600 dark:hover:hawa-bg-gray-700 dark:hover:hawa-text-gray-300"
           )
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.19.39-next",
+  "version": "0.19.40-next",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",