@sikka/hawa 0.30.11-next → 0.30.13-next
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.
- package/dist/{Radio-MHGhfbpA.d.ts → Radio-uPqJwFGq.d.ts} +2 -2
- package/dist/{Radio-ZM5l4CwH.d.mts → Radio-zXrZBXwJ.d.mts} +2 -2
- package/dist/blocks/auth/index.js +1 -1
- package/dist/blocks/auth/index.mjs +1 -1
- package/dist/blocks/feedback/index.js +179 -177
- package/dist/blocks/feedback/index.mjs +1 -1
- package/dist/blocks/index.d.mts +1 -1
- package/dist/blocks/index.d.ts +1 -1
- package/dist/blocks/index.js +180 -178
- package/dist/blocks/index.mjs +2 -2
- package/dist/blocks/pricing/index.js +179 -177
- package/dist/blocks/pricing/index.mjs +1 -1
- package/dist/card/index.js.map +1 -1
- package/dist/card/index.mjs.map +1 -1
- package/dist/{chunk-3GZMGTI5.mjs → chunk-MPRDKNFN.mjs} +180 -178
- package/dist/chunk-WQK2TN4F.mjs +215 -0
- package/dist/dataTable/index.js.map +1 -1
- package/dist/dataTable/index.mjs.map +1 -1
- package/dist/destroyableCard/index.js.map +1 -1
- package/dist/destroyableCard/index.mjs.map +1 -1
- package/dist/elements/index.d.mts +2 -2
- package/dist/elements/index.d.ts +2 -2
- package/dist/elements/index.js +179 -177
- package/dist/elements/index.mjs +1 -1
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +180 -178
- package/dist/index.mjs +181 -179
- package/dist/input/index.js.map +1 -1
- package/dist/input/index.mjs.map +1 -1
- package/dist/interfaceSettings/index.js +179 -177
- package/dist/interfaceSettings/index.js.map +1 -1
- package/dist/interfaceSettings/index.mjs +180 -178
- package/dist/interfaceSettings/index.mjs.map +1 -1
- package/dist/passwordInput/index.js.map +1 -1
- package/dist/passwordInput/index.mjs.map +1 -1
- package/dist/radio/index.d.mts +2 -2
- package/dist/radio/index.d.ts +2 -2
- package/dist/radio/index.js +179 -177
- package/dist/radio/index.js.map +1 -1
- package/dist/radio/index.mjs +180 -178
- package/dist/radio/index.mjs.map +1 -1
- package/dist/stats/index.js.map +1 -1
- package/dist/stats/index.mjs.map +1 -1
- package/package.json +1 -1
- package/dist/chunk-U42KD2OQ.mjs +0 -213
@@ -2485,208 +2485,210 @@ var PinInput = ({
|
|
2485
2485
|
};
|
2486
2486
|
|
2487
2487
|
// elements/radio/Radio.tsx
|
2488
|
-
import React9, { useState as useState4, useRef as useRef3, useEffect as useEffect4 } from "react";
|
2489
|
-
var Radio = (
|
2490
|
-
|
2491
|
-
|
2492
|
-
|
2493
|
-
|
2494
|
-
|
2495
|
-
|
2496
|
-
|
2497
|
-
|
2498
|
-
|
2499
|
-
|
2500
|
-
|
2501
|
-
|
2502
|
-
|
2503
|
-
|
2504
|
-
|
2505
|
-
|
2506
|
-
|
2488
|
+
import React9, { useState as useState4, useRef as useRef3, useEffect as useEffect4, forwardRef as forwardRef4 } from "react";
|
2489
|
+
var Radio = forwardRef4(
|
2490
|
+
({
|
2491
|
+
design = "default",
|
2492
|
+
width = "default",
|
2493
|
+
size = "default",
|
2494
|
+
orientation = "horizontal",
|
2495
|
+
name,
|
2496
|
+
labelProps,
|
2497
|
+
tabsContainerClassName,
|
2498
|
+
forceHideHelperText = false,
|
2499
|
+
onChange,
|
2500
|
+
...props
|
2501
|
+
}, ref) => {
|
2502
|
+
var _a, _b, _c;
|
2503
|
+
const [selectedOption, setSelectedOption] = useState4(
|
2504
|
+
props.defaultValue || props.value
|
2505
|
+
);
|
2506
|
+
let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary hawa-active dark:hawa-bg-primary";
|
2507
|
+
let inactiveTabStyle = `hawa-inline-block hawa-w-full hawa-transition-all hawa-bg-primary-foreground dark:hover:hawa-text-white
|
2507
2508
|
${props.disabled ? "" : "hover:hawa-bg-muted"}`;
|
2508
|
-
|
2509
|
-
|
2510
|
-
|
2511
|
-
|
2512
|
-
|
2513
|
-
|
2514
|
-
|
2515
|
-
|
2516
|
-
|
2517
|
-
|
2518
|
-
|
2519
|
-
|
2520
|
-
|
2521
|
-
|
2522
|
-
|
2523
|
-
|
2524
|
-
|
2525
|
-
|
2526
|
-
|
2527
|
-
|
2528
|
-
|
2529
|
-
|
2530
|
-
|
2531
|
-
|
2532
|
-
|
2533
|
-
|
2534
|
-
|
2535
|
-
|
2536
|
-
|
2537
|
-
|
2538
|
-
|
2539
|
-
|
2540
|
-
|
2541
|
-
|
2542
|
-
|
2543
|
-
|
2544
|
-
|
2545
|
-
|
2546
|
-
|
2547
|
-
{
|
2548
|
-
ref: parentRef,
|
2549
|
-
className: cn(
|
2550
|
-
props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
|
2551
|
-
"hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium",
|
2552
|
-
orientationStyle[orientation],
|
2553
|
-
widthStyle[width],
|
2554
|
-
tabsContainerClassName
|
2555
|
-
)
|
2556
|
-
},
|
2557
|
-
(_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ React9.createElement(
|
2558
|
-
"li",
|
2509
|
+
let orientationStyle = {
|
2510
|
+
horizontal: "hawa-flex hawa-flex-row",
|
2511
|
+
vertical: "hawa-flex hawa-flex-col"
|
2512
|
+
};
|
2513
|
+
let tabSizeStyle = {
|
2514
|
+
default: "hawa-py-2 hawa-px-4 hawa-text-sm",
|
2515
|
+
lg: "hawa-py-2 hawa-px-4",
|
2516
|
+
sm: "hawa-p-1.5 hawa-text-xs",
|
2517
|
+
xs: "hawa-p-1 hawa-text-[10px]"
|
2518
|
+
};
|
2519
|
+
let widthStyle = {
|
2520
|
+
none: "",
|
2521
|
+
default: "hawa-max-w-fit",
|
2522
|
+
full: "hawa-w-full"
|
2523
|
+
};
|
2524
|
+
const [parentDirection, setParentDirection] = React9.useState(
|
2525
|
+
null
|
2526
|
+
);
|
2527
|
+
const parentRef = useRef3(null);
|
2528
|
+
useEffect4(() => {
|
2529
|
+
var _a2;
|
2530
|
+
const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
|
2531
|
+
if (parentNode) {
|
2532
|
+
const dir = window.getComputedStyle(parentNode).direction;
|
2533
|
+
setParentDirection(dir);
|
2534
|
+
}
|
2535
|
+
});
|
2536
|
+
const handleChange = (opt) => {
|
2537
|
+
setSelectedOption(opt.value);
|
2538
|
+
if (onChange) {
|
2539
|
+
onChange(opt.value);
|
2540
|
+
} else {
|
2541
|
+
console.log("onChange was not provided");
|
2542
|
+
}
|
2543
|
+
};
|
2544
|
+
switch (design) {
|
2545
|
+
case "tabs":
|
2546
|
+
return /* @__PURE__ */ React9.createElement("div", { className: "hawa-gap-2 hawa-flex hawa-flex-col" }, props.label && /* @__PURE__ */ React9.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React9.createElement(
|
2547
|
+
"ul",
|
2559
2548
|
{
|
2560
|
-
|
2561
|
-
|
2562
|
-
|
2563
|
-
|
2564
|
-
|
2549
|
+
ref: parentRef,
|
2550
|
+
className: cn(
|
2551
|
+
props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
|
2552
|
+
"hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium",
|
2553
|
+
orientationStyle[orientation],
|
2554
|
+
widthStyle[width],
|
2555
|
+
tabsContainerClassName
|
2556
|
+
)
|
2557
|
+
},
|
2558
|
+
(_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ React9.createElement(
|
2559
|
+
"li",
|
2560
|
+
{
|
2561
|
+
"aria-current": "page",
|
2562
|
+
onClick: () => {
|
2563
|
+
if (props.disabled)
|
2564
|
+
return;
|
2565
|
+
handleChange(opt);
|
2566
|
+
},
|
2567
|
+
className: cn(
|
2568
|
+
"hawa-w-full hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
|
2569
|
+
!props.disabled && "hawa-cursor-pointer",
|
2570
|
+
orientation === "horizontal" && parentDirection === "ltr" && "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
|
2571
|
+
orientation === "horizontal" && parentDirection === "rtl" && "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
|
2572
|
+
orientation === "vertical" && "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
|
2573
|
+
tabSizeStyle[size],
|
2574
|
+
selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
|
2575
|
+
),
|
2576
|
+
key: o
|
2565
2577
|
},
|
2578
|
+
opt.icon && opt.icon,
|
2579
|
+
opt.label
|
2580
|
+
))
|
2581
|
+
), !forceHideHelperText && /* @__PURE__ */ React9.createElement(
|
2582
|
+
"p",
|
2583
|
+
{
|
2584
|
+
className: cn(
|
2585
|
+
"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
|
2586
|
+
props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
|
2587
|
+
)
|
2588
|
+
},
|
2589
|
+
props.helperText
|
2590
|
+
));
|
2591
|
+
case "bordered":
|
2592
|
+
return /* @__PURE__ */ React9.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React9.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ React9.createElement(
|
2593
|
+
"div",
|
2594
|
+
{
|
2566
2595
|
className: cn(
|
2567
|
-
"
|
2568
|
-
|
2569
|
-
orientation === "horizontal" && parentDirection === "ltr" && "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
|
2570
|
-
orientation === "horizontal" && parentDirection === "rtl" && "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
|
2571
|
-
orientation === "vertical" && "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
|
2572
|
-
tabSizeStyle[size],
|
2573
|
-
selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
|
2596
|
+
"radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
|
2597
|
+
props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
|
2574
2598
|
),
|
2575
|
-
key:
|
2599
|
+
key: i + 1
|
2576
2600
|
},
|
2577
|
-
|
2578
|
-
|
2579
|
-
|
2580
|
-
|
2581
|
-
|
2582
|
-
|
2583
|
-
|
2584
|
-
|
2585
|
-
|
2586
|
-
|
2587
|
-
},
|
2588
|
-
props.helperText
|
2589
|
-
));
|
2590
|
-
case "bordered":
|
2591
|
-
return /* @__PURE__ */ React9.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React9.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ React9.createElement(
|
2592
|
-
"div",
|
2593
|
-
{
|
2594
|
-
className: cn(
|
2595
|
-
"radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
|
2596
|
-
props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
|
2601
|
+
/* @__PURE__ */ React9.createElement(
|
2602
|
+
"input",
|
2603
|
+
{
|
2604
|
+
disabled: opt.disabled,
|
2605
|
+
id: opt.value.toString(),
|
2606
|
+
type: "radio",
|
2607
|
+
value: opt.value,
|
2608
|
+
name,
|
2609
|
+
onChange: () => handleChange(opt)
|
2610
|
+
}
|
2597
2611
|
),
|
2598
|
-
|
2599
|
-
|
2600
|
-
|
2612
|
+
/* @__PURE__ */ React9.createElement(
|
2613
|
+
"label",
|
2614
|
+
{
|
2615
|
+
htmlFor: opt.value.toString(),
|
2616
|
+
className: cn(
|
2617
|
+
"hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white",
|
2618
|
+
opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-900"
|
2619
|
+
)
|
2620
|
+
},
|
2621
|
+
opt.label
|
2622
|
+
)
|
2623
|
+
))));
|
2624
|
+
case "cards":
|
2625
|
+
return /* @__PURE__ */ React9.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ React9.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ React9.createElement(
|
2601
2626
|
"input",
|
2602
2627
|
{
|
2603
|
-
disabled: opt.disabled,
|
2604
|
-
id: opt.value.toString(),
|
2605
2628
|
type: "radio",
|
2606
|
-
|
2629
|
+
id: opt.value.toString(),
|
2607
2630
|
name,
|
2608
|
-
|
2631
|
+
value: opt.value.toString(),
|
2632
|
+
className: "hawa-peer hawa-hidden",
|
2633
|
+
required: true,
|
2634
|
+
disabled: opt.disabled
|
2609
2635
|
}
|
2610
|
-
),
|
2611
|
-
/* @__PURE__ */ React9.createElement(
|
2636
|
+
), /* @__PURE__ */ React9.createElement(
|
2612
2637
|
"label",
|
2613
2638
|
{
|
2614
2639
|
htmlFor: opt.value.toString(),
|
2615
2640
|
className: cn(
|
2616
|
-
"hawa-
|
2617
|
-
opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-
|
2641
|
+
"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",
|
2642
|
+
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"
|
2618
2643
|
)
|
2619
2644
|
},
|
2620
|
-
opt.label
|
2621
|
-
)
|
2622
|
-
|
2623
|
-
|
2624
|
-
|
2625
|
-
"input",
|
2626
|
-
{
|
2627
|
-
type: "radio",
|
2628
|
-
id: opt.value.toString(),
|
2629
|
-
name,
|
2630
|
-
value: opt.value.toString(),
|
2631
|
-
className: "hawa-peer hawa-hidden",
|
2632
|
-
required: true,
|
2633
|
-
disabled: opt.disabled
|
2634
|
-
}
|
2635
|
-
), /* @__PURE__ */ React9.createElement(
|
2636
|
-
"label",
|
2637
|
-
{
|
2638
|
-
htmlFor: opt.value.toString(),
|
2639
|
-
className: cn(
|
2640
|
-
"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",
|
2641
|
-
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"
|
2642
|
-
)
|
2643
|
-
},
|
2644
|
-
/* @__PURE__ */ React9.createElement("div", { className: "hawa-block hawa-h-full hawa-w-full" }, /* @__PURE__ */ React9.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React9.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
|
2645
|
-
))));
|
2646
|
-
default:
|
2647
|
-
return /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React9.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React9.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React9.createElement(
|
2648
|
-
"div",
|
2649
|
-
{
|
2650
|
-
className: cn(
|
2651
|
-
"radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
|
2652
|
-
props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
|
2653
|
-
),
|
2654
|
-
key: i + 1
|
2655
|
-
},
|
2656
|
-
/* @__PURE__ */ React9.createElement(
|
2657
|
-
"input",
|
2645
|
+
/* @__PURE__ */ React9.createElement("div", { className: "hawa-block hawa-h-full hawa-w-full" }, /* @__PURE__ */ React9.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React9.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
|
2646
|
+
))));
|
2647
|
+
default:
|
2648
|
+
return /* @__PURE__ */ React9.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React9.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React9.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React9.createElement(
|
2649
|
+
"div",
|
2658
2650
|
{
|
2659
|
-
|
2660
|
-
|
2661
|
-
|
2662
|
-
|
2663
|
-
|
2664
|
-
|
2665
|
-
|
2666
|
-
|
2667
|
-
|
2668
|
-
|
2651
|
+
className: cn(
|
2652
|
+
"radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
|
2653
|
+
props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
|
2654
|
+
),
|
2655
|
+
key: i + 1
|
2656
|
+
},
|
2657
|
+
/* @__PURE__ */ React9.createElement(
|
2658
|
+
"input",
|
2659
|
+
{
|
2660
|
+
disabled: opt.disabled,
|
2661
|
+
id: opt.value.toString(),
|
2662
|
+
type: "radio",
|
2663
|
+
value: opt.value,
|
2664
|
+
name,
|
2665
|
+
onChange: () => handleChange(opt)
|
2666
|
+
}
|
2667
|
+
),
|
2668
|
+
/* @__PURE__ */ React9.createElement(
|
2669
|
+
"label",
|
2670
|
+
{
|
2671
|
+
htmlFor: opt.value.toString(),
|
2672
|
+
className: cn(
|
2673
|
+
"hawa-text-sm hawa-font-medium dark:hawa-text-white",
|
2674
|
+
opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900"
|
2675
|
+
)
|
2676
|
+
},
|
2677
|
+
opt.label
|
2678
|
+
)
|
2679
|
+
))), /* @__PURE__ */ React9.createElement(
|
2680
|
+
"p",
|
2669
2681
|
{
|
2670
|
-
htmlFor: opt.value.toString(),
|
2671
2682
|
className: cn(
|
2672
|
-
"hawa-text-
|
2673
|
-
|
2683
|
+
"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
|
2684
|
+
props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
|
2674
2685
|
)
|
2675
2686
|
},
|
2676
|
-
|
2677
|
-
)
|
2678
|
-
|
2679
|
-
"p",
|
2680
|
-
{
|
2681
|
-
className: cn(
|
2682
|
-
"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
|
2683
|
-
props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
|
2684
|
-
)
|
2685
|
-
},
|
2686
|
-
props.helperText
|
2687
|
-
));
|
2687
|
+
props.helperText
|
2688
|
+
));
|
2689
|
+
}
|
2688
2690
|
}
|
2689
|
-
|
2691
|
+
);
|
2690
2692
|
|
2691
2693
|
// elements/textarea/Textarea.tsx
|
2692
2694
|
import * as React10 from "react";
|
@@ -0,0 +1,215 @@
|
|
1
|
+
"use client";
|
2
|
+
import {
|
3
|
+
Label,
|
4
|
+
cn
|
5
|
+
} from "./chunk-ZGNBKYX7.mjs";
|
6
|
+
|
7
|
+
// elements/radio/Radio.tsx
|
8
|
+
import React, { useState, useRef, useEffect, forwardRef } from "react";
|
9
|
+
var Radio = forwardRef(
|
10
|
+
({
|
11
|
+
design = "default",
|
12
|
+
width = "default",
|
13
|
+
size = "default",
|
14
|
+
orientation = "horizontal",
|
15
|
+
name,
|
16
|
+
labelProps,
|
17
|
+
tabsContainerClassName,
|
18
|
+
forceHideHelperText = false,
|
19
|
+
onChange,
|
20
|
+
...props
|
21
|
+
}, ref) => {
|
22
|
+
var _a, _b, _c;
|
23
|
+
const [selectedOption, setSelectedOption] = useState(
|
24
|
+
props.defaultValue || props.value
|
25
|
+
);
|
26
|
+
let activeTabStyle = "hawa-inline-block hawa-w-full hawa-text-primary-foreground hawa-bg-primary hawa-active dark:hawa-bg-primary";
|
27
|
+
let inactiveTabStyle = `hawa-inline-block hawa-w-full hawa-transition-all hawa-bg-primary-foreground dark:hover:hawa-text-white
|
28
|
+
${props.disabled ? "" : "hover:hawa-bg-muted"}`;
|
29
|
+
let orientationStyle = {
|
30
|
+
horizontal: "hawa-flex hawa-flex-row",
|
31
|
+
vertical: "hawa-flex hawa-flex-col"
|
32
|
+
};
|
33
|
+
let tabSizeStyle = {
|
34
|
+
default: "hawa-py-2 hawa-px-4 hawa-text-sm",
|
35
|
+
lg: "hawa-py-2 hawa-px-4",
|
36
|
+
sm: "hawa-p-1.5 hawa-text-xs",
|
37
|
+
xs: "hawa-p-1 hawa-text-[10px]"
|
38
|
+
};
|
39
|
+
let widthStyle = {
|
40
|
+
none: "",
|
41
|
+
default: "hawa-max-w-fit",
|
42
|
+
full: "hawa-w-full"
|
43
|
+
};
|
44
|
+
const [parentDirection, setParentDirection] = React.useState(
|
45
|
+
null
|
46
|
+
);
|
47
|
+
const parentRef = useRef(null);
|
48
|
+
useEffect(() => {
|
49
|
+
var _a2;
|
50
|
+
const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
|
51
|
+
if (parentNode) {
|
52
|
+
const dir = window.getComputedStyle(parentNode).direction;
|
53
|
+
setParentDirection(dir);
|
54
|
+
}
|
55
|
+
});
|
56
|
+
const handleChange = (opt) => {
|
57
|
+
setSelectedOption(opt.value);
|
58
|
+
if (onChange) {
|
59
|
+
onChange(opt.value);
|
60
|
+
} else {
|
61
|
+
console.log("onChange was not provided");
|
62
|
+
}
|
63
|
+
};
|
64
|
+
switch (design) {
|
65
|
+
case "tabs":
|
66
|
+
return /* @__PURE__ */ React.createElement("div", { className: "hawa-gap-2 hawa-flex hawa-flex-col" }, props.label && /* @__PURE__ */ React.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React.createElement(
|
67
|
+
"ul",
|
68
|
+
{
|
69
|
+
ref: parentRef,
|
70
|
+
className: cn(
|
71
|
+
props.options && ((_a = props.options) == null ? void 0 : _a.length) > 2 ? "hawa-flex-wrap xs:hawa-max-w-full xs:hawa-flex-nowrap" : "",
|
72
|
+
"hawa-select-none hawa-whitespace-nowrap hawa-rounded hawa-border hawa-text-center hawa-font-medium",
|
73
|
+
orientationStyle[orientation],
|
74
|
+
widthStyle[width],
|
75
|
+
tabsContainerClassName
|
76
|
+
)
|
77
|
+
},
|
78
|
+
(_b = props.options) == null ? void 0 : _b.map((opt, o) => /* @__PURE__ */ React.createElement(
|
79
|
+
"li",
|
80
|
+
{
|
81
|
+
"aria-current": "page",
|
82
|
+
onClick: () => {
|
83
|
+
if (props.disabled)
|
84
|
+
return;
|
85
|
+
handleChange(opt);
|
86
|
+
},
|
87
|
+
className: cn(
|
88
|
+
"hawa-w-full hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
|
89
|
+
!props.disabled && "hawa-cursor-pointer",
|
90
|
+
orientation === "horizontal" && parentDirection === "ltr" && "hawa-rounded-none first:hawa-rounded-l last:hawa-rounded-r",
|
91
|
+
orientation === "horizontal" && parentDirection === "rtl" && "hawa-rounded-none first:hawa-rounded-r last:hawa-rounded-l",
|
92
|
+
orientation === "vertical" && "hawa-rounded-none first:hawa-rounded-t last:hawa-rounded-b",
|
93
|
+
tabSizeStyle[size],
|
94
|
+
selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
|
95
|
+
),
|
96
|
+
key: o
|
97
|
+
},
|
98
|
+
opt.icon && opt.icon,
|
99
|
+
opt.label
|
100
|
+
))
|
101
|
+
), !forceHideHelperText && /* @__PURE__ */ React.createElement(
|
102
|
+
"p",
|
103
|
+
{
|
104
|
+
className: cn(
|
105
|
+
"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
|
106
|
+
props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
|
107
|
+
)
|
108
|
+
},
|
109
|
+
props.helperText
|
110
|
+
));
|
111
|
+
case "bordered":
|
112
|
+
return /* @__PURE__ */ React.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ React.createElement(
|
113
|
+
"div",
|
114
|
+
{
|
115
|
+
className: cn(
|
116
|
+
"radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
|
117
|
+
props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
|
118
|
+
),
|
119
|
+
key: i + 1
|
120
|
+
},
|
121
|
+
/* @__PURE__ */ React.createElement(
|
122
|
+
"input",
|
123
|
+
{
|
124
|
+
disabled: opt.disabled,
|
125
|
+
id: opt.value.toString(),
|
126
|
+
type: "radio",
|
127
|
+
value: opt.value,
|
128
|
+
name,
|
129
|
+
onChange: () => handleChange(opt)
|
130
|
+
}
|
131
|
+
),
|
132
|
+
/* @__PURE__ */ React.createElement(
|
133
|
+
"label",
|
134
|
+
{
|
135
|
+
htmlFor: opt.value.toString(),
|
136
|
+
className: cn(
|
137
|
+
"hawa-ml-2 hawa-w-full hawa-select-none hawa-p-4 hawa-pl-3 hawa-text-sm hawa-font-medium hawa-text-black dark:hawa-text-white",
|
138
|
+
opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-900"
|
139
|
+
)
|
140
|
+
},
|
141
|
+
opt.label
|
142
|
+
)
|
143
|
+
))));
|
144
|
+
case "cards":
|
145
|
+
return /* @__PURE__ */ React.createElement("ul", { className: cn(orientationStyle[orientation], "hawa-gap-4") }, (_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ React.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ React.createElement(
|
146
|
+
"input",
|
147
|
+
{
|
148
|
+
type: "radio",
|
149
|
+
id: opt.value.toString(),
|
150
|
+
name,
|
151
|
+
value: opt.value.toString(),
|
152
|
+
className: "hawa-peer hawa-hidden",
|
153
|
+
required: true,
|
154
|
+
disabled: opt.disabled
|
155
|
+
}
|
156
|
+
), /* @__PURE__ */ React.createElement(
|
157
|
+
"label",
|
158
|
+
{
|
159
|
+
htmlFor: opt.value.toString(),
|
160
|
+
className: cn(
|
161
|
+
"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",
|
162
|
+
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"
|
163
|
+
)
|
164
|
+
},
|
165
|
+
/* @__PURE__ */ React.createElement("div", { className: "hawa-block hawa-h-full hawa-w-full" }, /* @__PURE__ */ React.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
|
166
|
+
))));
|
167
|
+
default:
|
168
|
+
return /* @__PURE__ */ React.createElement("div", { className: "hawa-flex hawa-flex-col hawa-gap-2" }, props.label && /* @__PURE__ */ React.createElement(Label, { ...labelProps }, props.label), /* @__PURE__ */ React.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React.createElement(
|
169
|
+
"div",
|
170
|
+
{
|
171
|
+
className: cn(
|
172
|
+
"radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
|
173
|
+
props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
|
174
|
+
),
|
175
|
+
key: i + 1
|
176
|
+
},
|
177
|
+
/* @__PURE__ */ React.createElement(
|
178
|
+
"input",
|
179
|
+
{
|
180
|
+
disabled: opt.disabled,
|
181
|
+
id: opt.value.toString(),
|
182
|
+
type: "radio",
|
183
|
+
value: opt.value,
|
184
|
+
name,
|
185
|
+
onChange: () => handleChange(opt)
|
186
|
+
}
|
187
|
+
),
|
188
|
+
/* @__PURE__ */ React.createElement(
|
189
|
+
"label",
|
190
|
+
{
|
191
|
+
htmlFor: opt.value.toString(),
|
192
|
+
className: cn(
|
193
|
+
"hawa-text-sm hawa-font-medium dark:hawa-text-white",
|
194
|
+
opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900"
|
195
|
+
)
|
196
|
+
},
|
197
|
+
opt.label
|
198
|
+
)
|
199
|
+
))), /* @__PURE__ */ React.createElement(
|
200
|
+
"p",
|
201
|
+
{
|
202
|
+
className: cn(
|
203
|
+
"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
|
204
|
+
props.helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
|
205
|
+
)
|
206
|
+
},
|
207
|
+
props.helperText
|
208
|
+
));
|
209
|
+
}
|
210
|
+
}
|
211
|
+
);
|
212
|
+
|
213
|
+
export {
|
214
|
+
Radio
|
215
|
+
};
|