@sikka/hawa
Version:
Modern UI Kit made with Tailwind
524 lines (514 loc) • 21.2 kB
JavaScript
"use client";
// elements/interfaceSettings/InterfaceSettings.tsx
import React6, { useState as useState2 } from "react";
// util/index.ts
import { clsx } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs) {
return twMerge(clsx(inputs));
}
// elements/radio/Radio.tsx
import React5, { useState, useRef, useEffect, forwardRef as forwardRef3 } from "react";
// elements/helperText/HelperText.tsx
import React from "react";
var HelperText = ({ helperText }) => /* @__PURE__ */ React.createElement(
"p",
{
className: cn(
"hawa-my-0 hawa-text-start hawa-text-xs hawa-text-helper-color hawa-transition-all",
helperText ? "hawa-h-4 hawa-opacity-100" : "hawa-h-0 hawa-opacity-0"
)
},
helperText
);
// elements/label/Label.tsx
import * as React3 from "react";
// elements/tooltip/Tooltip.tsx
import React2 from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
var TooltipContent = React2.forwardRef(({ className, sideOffset = 4, size = "default", ...props }, ref) => /* @__PURE__ */ React2.createElement(
TooltipPrimitive.Content,
{
ref,
sideOffset,
className: cn(
"hawa-z-50 hawa-overflow-hidden hawa-rounded-md hawa-border hawa-bg-popover hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-text-popover-foreground hawa-shadow-md hawa-animate-in hawa-fade-in-0 hawa-zoom-in-95 data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=closed]:hawa-zoom-out-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
{
"hawa-text-xs": size === "small",
"hawa-text-xl": size === "large"
},
className
),
...props
}
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
var TooltipArrow = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(TooltipPrimitive.Arrow, { ref, className: cn(className), ...props }));
TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
var Tooltip = ({
side,
size,
open,
content,
children,
disabled,
defaultOpen,
onOpenChange,
triggerProps,
contentProps,
providerProps,
delayDuration = 300,
...props
}) => {
return /* @__PURE__ */ React2.createElement(
TooltipPrimitive.TooltipProvider,
{
delayDuration,
...providerProps
},
/* @__PURE__ */ React2.createElement(
TooltipPrimitive.Root,
{
open: !disabled && open,
defaultOpen,
onOpenChange,
...props
},
/* @__PURE__ */ React2.createElement(TooltipPrimitive.Trigger, { ...triggerProps }, children),
/* @__PURE__ */ React2.createElement(
TooltipContent,
{
size,
side,
align: "center",
...contentProps,
style: {
...contentProps == null ? void 0 : contentProps.style,
maxWidth: "var(--radix-tooltip-content-available-width)",
maxHeight: "var(--radix-tooltip-content-available-height)"
}
},
content
)
)
);
};
// elements/label/Label.tsx
var Label = React3.forwardRef(({ className, hint, hintSide, required, children, ...props }, ref) => /* @__PURE__ */ React3.createElement("div", { className: "hawa-flex hawa-flex-row hawa-items-center hawa-gap-1 hawa-transition-all" }, /* @__PURE__ */ React3.createElement(
"label",
{
ref,
className: cn(
"hawa-text-sm hawa-font-medium hawa-leading-none peer-disabled:hawa-cursor-not-allowed peer-disabled:hawa-opacity-70",
className
),
...props
},
children,
required && /* @__PURE__ */ React3.createElement("span", { className: "hawa-mx-0.5 hawa-text-red-500" }, "*")
), hint && /* @__PURE__ */ React3.createElement(
Tooltip,
{
content: hint,
side: hintSide,
triggerProps: {
tabIndex: -1,
onClick: (event) => event.preventDefault()
}
},
/* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
className: "hawa-h-[14px] hawa-w-[14px] hawa-cursor-help",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round"
},
/* @__PURE__ */ React3.createElement("circle", { cx: "12", cy: "12", r: "10" }),
/* @__PURE__ */ React3.createElement("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }),
/* @__PURE__ */ React3.createElement("path", { d: "M12 17h.01" })
))
)));
Label.displayName = "Label";
// elements/popover/Popover.tsx
import * as React4 from "react";
import * as PopoverPrimitive from "@radix-ui/react-popover";
var PopoverContent = React4.forwardRef(
({ className, align = "center", sideOffset = 4, container, ...props }, ref) => /* @__PURE__ */ React4.createElement(PopoverPrimitive.Portal, { container }, /* @__PURE__ */ React4.createElement(
PopoverPrimitive.Content,
{
ref,
align,
sideOffset,
className: cn(
"dark:dark-shadow hawa-z-50 hawa-rounded hawa-border hawa-bg-popover hawa-text-popover-foreground hawa-shadow-md hawa-outline-none data-[state=open]:hawa-animate-in data-[state=closed]:hawa-animate-out data-[state=closed]:hawa-fade-out-0 data-[state=open]:hawa-fade-in-0 data-[state=closed]:hawa-zoom-out-95 data-[state=open]:hawa-zoom-in-95 data-[side=bottom]:hawa-slide-in-from-top-2 data-[side=left]:hawa-slide-in-from-right-2 data-[side=right]:hawa-slide-in-from-left-2 data-[side=top]:hawa-slide-in-from-bottom-2",
className
),
...props
}
))
);
PopoverContent.displayName = PopoverPrimitive.Content.displayName;
var PopoverTrigger = PopoverPrimitive.Trigger;
var PopoverRoot = PopoverPrimitive.Root;
// elements/radio/Radio.tsx
var Radio = forwardRef3(
({
design = "default",
width = "default",
size = "default",
orientation = "horizontal",
name,
labelProps,
tabsContainerClassName,
forceHideHelperText = false,
onChange,
containerClassNames,
...props
}, ref) => {
var _a, _b, _c;
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 hawa-bg-primary-foreground dark:hover:hawa-text-white
${props.disabled ? "" : "hover:hawa-bg-muted"}`;
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",
full: "hawa-w-full"
};
const [parentDirection, setParentDirection] = React5.useState(
null
);
const [selectedOption, setSelectedOption] = useState(
props.defaultValue || props.value
);
const [openTooltip, setOpenTooltip] = useState(null);
const parentRef = useRef(null);
useEffect(() => {
var _a2;
const parentNode = (_a2 = parentRef.current) == null ? void 0 : _a2.parentNode;
if (parentNode) {
const dir = window.getComputedStyle(parentNode).direction;
setParentDirection(dir);
}
});
const handleChange = (opt) => {
setSelectedOption(opt.value);
if (onChange) {
onChange(opt.value);
} else {
console.log("onChange was not provided");
}
};
const radio_option_tabs_styling = [
"hawa-w-full hawa-last hawa-flex hawa-flex-row hawa-items-center hawa-justify-center hawa-gap-2 ",
!props.disabled && "hawa-cursor-pointer",
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]
];
switch (design) {
case "tabs":
return /* @__PURE__ */ React5.createElement(
"div",
{
className: cn(
"hawa-gap-2 hawa-flex hawa-flex-col",
containerClassNames == null ? void 0 : containerClassNames.tabs
)
},
props.label && /* @__PURE__ */ React5.createElement(Label, { ...labelProps }, props.label),
/* @__PURE__ */ React5.createElement(
"ul",
{
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-font-medium hawa-h-[40px]",
orientationStyle[orientation],
widthStyle[width],
tabsContainerClassName
)
},
(_b = props.options) == null ? void 0 : _b.map((opt, o) => {
return opt.tooltip ? /* @__PURE__ */ React5.createElement(
PopoverRoot,
{
key: o,
open: o === openTooltip,
onOpenChange: (bool) => setOpenTooltip(bool ? o : null)
},
/* @__PURE__ */ React5.createElement(
PopoverTrigger,
{
onMouseEnter: () => setOpenTooltip(o),
onMouseLeave: () => setOpenTooltip(null),
asChild: true
},
/* @__PURE__ */ React5.createElement(
"li",
{
"aria-current": "page",
onClick: () => {
if (props.disabled || opt.disabled) return;
handleChange(opt);
},
className: cn(
...radio_option_tabs_styling,
selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
)
},
opt.icon && opt.icon,
opt.label
)
),
/* @__PURE__ */ React5.createElement(PopoverContent, { ...opt.tooltipContentProps }, opt.tooltip)
) : /* @__PURE__ */ React5.createElement(
"li",
{
key: o,
"aria-current": "page",
onClick: () => {
if (props.disabled || opt.disabled) return;
handleChange(opt);
},
className: cn(
...radio_option_tabs_styling,
selectedOption === opt.value ? activeTabStyle : inactiveTabStyle
)
},
opt.icon && opt.icon,
opt.label
);
})
),
!forceHideHelperText && /* @__PURE__ */ React5.createElement(HelperText, { helperText: props.helperText })
);
case "bordered":
return /* @__PURE__ */ React5.createElement(
"div",
{
className: cn(
orientationStyle[orientation],
"hawa-gap-4",
containerClassNames == null ? void 0 : containerClassNames.bordered
)
},
props.options && props.options.map((opt, i) => /* @__PURE__ */ React5.createElement("div", { key: i, className: "hawa-w-full hawa-rounded hawa-border" }, /* @__PURE__ */ React5.createElement(
"div",
{
className: cn(
"radio-item radio-item-bordered hawa-flex hawa-items-center hawa-transition-all",
props.direction === "rtl" ? "margin-left right-19px" : "margin-right left-23px"
),
key: i + 1
},
/* @__PURE__ */ React5.createElement(
"input",
{
disabled: opt.disabled,
id: opt.value.toString(),
type: "radio",
value: opt.value,
name,
onChange: () => handleChange(opt)
}
),
/* @__PURE__ */ React5.createElement(
"label",
{
htmlFor: opt.value.toString(),
className: cn(
"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",
opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hawa-text-gray-900"
)
},
opt.label
)
)))
);
case "cards":
return /* @__PURE__ */ React5.createElement(
"ul",
{
className: cn(
orientationStyle[orientation],
"hawa-gap-4",
containerClassNames == null ? void 0 : containerClassNames.cards
)
},
(_c = props.options) == null ? void 0 : _c.map((opt, o) => /* @__PURE__ */ React5.createElement("li", { key: o, onClick: () => handleChange(opt) }, /* @__PURE__ */ React5.createElement(
"input",
{
type: "radio",
id: opt.value.toString(),
name,
value: opt.value.toString(),
className: "hawa-peer hawa-hidden",
required: true,
disabled: opt.disabled
}
), /* @__PURE__ */ React5.createElement(
"label",
{
htmlFor: opt.value.toString(),
className: cn(
"hawa-inline-flex hawa-h-full hawa-w-full hawa-transition-all hawa-items-center hawa-justify-between hawa-rounded-lg hawa-border hawa-border-foreground/10 hawa-bg-background hawa-p-5 hawa-text-gray-500 peer-checked:hawa-border-primary peer-checked:hawa-text-primary dark:hawa-border-foreground/10 dark:hawa-bg-foreground/5 dark:hawa-text-gray-400 dark:peer-checked:hawa-text-primary",
opt.disabled ? "hawa-opacity-50" : "hawa-cursor-pointer hover:hawa-bg-foreground/10 hover:hawa-text-gray-600 dark:hover:hawa-bg-foreground/20 dark:hover:hawa-text-gray-300"
)
},
/* @__PURE__ */ React5.createElement("div", { className: "hawa-block hawa-h-full hawa-w-full" }, /* @__PURE__ */ React5.createElement("div", { className: "hawa-w-full hawa-text-lg hawa-font-semibold" }, opt.label), /* @__PURE__ */ React5.createElement("div", { className: "hawa-w-full" }, opt.sublabel))
)))
);
default:
return /* @__PURE__ */ React5.createElement(
"div",
{
className: cn(
"hawa-flex hawa-flex-col hawa-gap-2",
containerClassNames == null ? void 0 : containerClassNames.default
)
},
props.label && /* @__PURE__ */ React5.createElement(Label, { ...labelProps }, props.label),
/* @__PURE__ */ React5.createElement("div", { className: cn(orientationStyle[orientation], "hawa-gap-2") }, props.options && props.options.map((opt, i) => /* @__PURE__ */ React5.createElement(
"div",
{
className: cn(
"radio-item radio-item-default hawa-flex hawa-items-center hawa-transition-all",
props.direction === "rtl" ? "margin-left right-3px" : "margin-right left-3px"
),
key: i + 1
},
/* @__PURE__ */ React5.createElement(
"input",
{
disabled: opt.disabled,
id: opt.value.toString(),
type: "radio",
value: opt.value,
name,
onChange: () => handleChange(opt)
}
),
/* @__PURE__ */ React5.createElement(
"label",
{
htmlFor: opt.value.toString(),
className: cn(
"hawa-text-sm hawa-font-medium dark:hawa-text-white",
opt.disabled ? "hawa-text-gray-400" : "hawa-cursor-pointer hawa-text-gray-900"
)
},
opt.label
)
))),
/* @__PURE__ */ React5.createElement(HelperText, { helperText: props.helperText })
);
}
}
);
// elements/interfaceSettings/InterfaceSettings.tsx
var InterfaceSettings = ({
orientation = "horizontal",
width = "default",
handleColorMode,
handleLanguage,
...props
}) => {
const [color, setColor] = useState2(props.currentColorMode);
const [language, setLanguage] = useState2(props.currentLanguage);
let orientationStyle = {
horizontal: "hawa-flex hawa-flex-row hawa-justify-between",
vertical: "hawa-flex hawa-flex-col hawa-items-center hawa-gap-2"
};
return /* @__PURE__ */ React6.createElement("div", { className: cn(orientationStyle[orientation]) }, /* @__PURE__ */ React6.createElement(
Radio,
{
name: "language",
width,
defaultValue: language,
onChange: (e) => {
if (handleLanguage) {
handleLanguage(e);
}
setLanguage(e);
},
design: "tabs",
options: [
{ value: "ar", label: "\u0639\u0631\u0628\u064A" },
{ value: "en", label: "English" }
]
}
), /* @__PURE__ */ React6.createElement(
Radio,
{
name: "theme",
width,
defaultValue: color,
onChange: (e) => {
if (handleColorMode) {
handleColorMode(e);
}
setColor(e);
},
design: "tabs",
options: [
{
value: "light",
label: /* @__PURE__ */ React6.createElement(
"svg",
{
width: "15",
height: "15",
viewBox: "0 0 15 15",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
className: "hawa-h-[1.2rem] hawa-w-[1.2rem] hawa-rotate-0 hawa-scale-100 hawa-transition-all dark:hawa--rotate-90"
},
/* @__PURE__ */ React6.createElement(
"path",
{
d: "M7.5 0C7.77614 0 8 0.223858 8 0.5V2.5C8 2.77614 7.77614 3 7.5 3C7.22386 3 7 2.77614 7 2.5V0.5C7 0.223858 7.22386 0 7.5 0ZM2.1967 2.1967C2.39196 2.00144 2.70854 2.00144 2.90381 2.1967L4.31802 3.61091C4.51328 3.80617 4.51328 4.12276 4.31802 4.31802C4.12276 4.51328 3.80617 4.51328 3.61091 4.31802L2.1967 2.90381C2.00144 2.70854 2.00144 2.39196 2.1967 2.1967ZM0.5 7C0.223858 7 0 7.22386 0 7.5C0 7.77614 0.223858 8 0.5 8H2.5C2.77614 8 3 7.77614 3 7.5C3 7.22386 2.77614 7 2.5 7H0.5ZM2.1967 12.8033C2.00144 12.608 2.00144 12.2915 2.1967 12.0962L3.61091 10.682C3.80617 10.4867 4.12276 10.4867 4.31802 10.682C4.51328 10.8772 4.51328 11.1938 4.31802 11.3891L2.90381 12.8033C2.70854 12.9986 2.39196 12.9986 2.1967 12.8033ZM12.5 7C12.2239 7 12 7.22386 12 7.5C12 7.77614 12.2239 8 12.5 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12.5ZM10.682 4.31802C10.4867 4.12276 10.4867 3.80617 10.682 3.61091L12.0962 2.1967C12.2915 2.00144 12.608 2.00144 12.8033 2.1967C12.9986 2.39196 12.9986 2.70854 12.8033 2.90381L11.3891 4.31802C11.1938 4.51328 10.8772 4.51328 10.682 4.31802ZM8 12.5C8 12.2239 7.77614 12 7.5 12C7.22386 12 7 12.2239 7 12.5V14.5C7 14.7761 7.22386 15 7.5 15C7.77614 15 8 14.7761 8 14.5V12.5ZM10.682 10.682C10.8772 10.4867 11.1938 10.4867 11.3891 10.682L12.8033 12.0962C12.9986 12.2915 12.9986 12.608 12.8033 12.8033C12.608 12.9986 12.2915 12.9986 12.0962 12.8033L10.682 11.3891C10.4867 11.1938 10.4867 10.8772 10.682 10.682ZM5.5 7.5C5.5 6.39543 6.39543 5.5 7.5 5.5C8.60457 5.5 9.5 6.39543 9.5 7.5C9.5 8.60457 8.60457 9.5 7.5 9.5C6.39543 9.5 5.5 8.60457 5.5 7.5ZM7.5 4.5C5.84315 4.5 4.5 5.84315 4.5 7.5C4.5 9.15685 5.84315 10.5 7.5 10.5C9.15685 10.5 10.5 9.15685 10.5 7.5C10.5 5.84315 9.15685 4.5 7.5 4.5Z",
fill: "currentColor"
}
)
)
},
{
value: "dark",
label: /* @__PURE__ */ React6.createElement(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
className: "hawa-h-[1.2rem] hawa-w-[1.2rem] hawa-transition-all dark:hawa-rotate-0 dark:hawa-scale-100"
},
/* @__PURE__ */ React6.createElement("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
)
}
]
}
));
};
export {
InterfaceSettings
};
//# sourceMappingURL=index.mjs.map