Sidebar

	--------------------     Components Dependencies   -------------------------

		import clsx from "clsx";

/**
 * @typedef HTMLButtonTagWithChildren
 * @type {import("@kitajs/html").PropsWithChildren<Omit<JSX.HtmlButtonTag, "className"> & import("../common/props").CLSXClassProps>}
 */

/**
 * @typedef {Object} ButtonProps
 * @type {{ text?: string } & HTMLButtonTagWithChildren & import("../common/props").BorderRadiusProps & import("../common/props").SizeProps & import("../common/props").VariantColorProps}
 */

/**
 * Button component props
 * @param {ButtonProps} props
 */
export function Button({
	children,
	class: className,
	size = "md",
	text,
	variant = "solid",
	borderRadius = "rounded",
	...restProps
}) {
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantColorMap = new Map([
		["solid", "btn"],
		["outlined", "btn-outlined"],
		["inversed", "btn-inversed"]
	]);

	/**
	 * @type {Map<import("../common/types").SizeType, string>}
	 */
	const sizeMap = new Map([
		["xs", "text-xs px-2 py-1"],
		["sm", "px-4 py-2 text-sm"],
		["md", "px-4 py-2"],
		["lg", "px-8 py-4 text-lg"],
		["xl", "px-12 py-6 text-xl"],
		["2xl", "px-16 py-8 text-4xl"]
	]);

	/**
	 * @type {Map<import("../common/types").BorderRadiusType, string>}
	 */
	const borderRadiusMap = new Map([
		["square", "rounded-none"],
		["rounded", "rounded"],
		["arc", "rounded-xl"],
		["pill", "rounded-full"],
		["curve", "rounded-lg"],
		["circle", "aspect-square rounded-full"]
	]);

	return (
		<button
			class={clsx(
				variantColorMap.get(variant),
				sizeMap.get(size),
				borderRadiusMap.get(borderRadius),
				className
			)}
			{...restProps}
		>
			{text ? <span safe>{text}</span> : children}
		</button>
	);
}

/**
 * Primary Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function PrimaryButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-primary"],
		["outlined", "btn-primary-outlined"],
		["inversed", "btn-primary-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

/**
 * Secondary Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function SecondaryButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-secondary"],
		["outlined", "btn-secondary-outlined"],
		["inversed", "btn-secondary-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

/**
 * Success Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function SuccessButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-success"],
		["outlined", "btn-success-outlined"],
		["inversed", "btn-success-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

/**
 * Danger Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function DangerButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-danger"],
		["outlined", "btn-danger-outlined"],
		["inversed", "btn-danger-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

/**
 * Info Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function InfoButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-info"],
		["outlined", "btn-info-outlined"],
		["inversed", "btn-info-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}

/**
 * Warning Button component props
 * @type {import("../common/props").JSXComponent<ButtonProps>}
 */
export function WarningButton(props) {
	const { children, class: className, variant = "solid", ...restProps } = props;
	/**
	 * @type {Map<import("../common/types").VariantColorType, string>}
	 */
	const variantClassMap = new Map([
		["solid", "btn-warning"],
		["outlined", "btn-warning-outlined"],
		["inversed", "btn-warning-inversed"]
	]);

	return (
		<Button
			class={[variantClassMap.get(variant), className].join(" ")}
			{...restProps}
		>
			{children}
		</Button>
	);
}


import { icons } from "@iconify-json/ri/icons.json";
import clsx from "clsx";
import { SVG } from "./svg.component";

/**
 * @typedef {`ri.${keyof typeof import("@iconify-json/ri/icons.json")["icons"]}`} IconName
 */

/**
 * @typedef IconProps
 * @type {{size?: number, name: IconName, color?: string, applyDefsId?: string} & import("./svg.component").SVGProps}
 */

/**
 * Icon component props
 * @param {Omit<IconProps, "viewBox">} props
 */
export function Icon({
	children,
	size = 4,
	name,
	applyDefsId,
	class: className,
	...restProps
}) {
	const iconType = name.split(".")[0];
	const iconName = /** @type {keyof typeof icons} */ (name.split(".")[1]);
	if (!icons[iconName]) {
		console.error(`"${name}" is not an icon from iconify/${iconType}`);
		return "";
	}
	const { body } = icons[iconName];

	// The purpose is to retrieve value from d attribute
	let retrieveDValue = "";
	const bodyMatch = body.match(/d=".+"/g);
	const retrieveDAttribute = bodyMatch ? bodyMatch[0] : "";
	if (retrieveDAttribute) {
		retrieveDValue = retrieveDAttribute.slice(3, -2);
	}

	return (
		<SVG
			viewBox={"0 0 24 24"}
			{...restProps}
			class={clsx(`size-${size}`, className)}
		>
			{children}
			<path
				stroke-linecap="round"
				stroke-linejoin="round"
				fill={applyDefsId ? `url(#${applyDefsId})` : "currentColor"}
				d={retrieveDValue}
			/>
		</SVG>
	);
}


/**
 * @typedef SVGProps
 * @type {{fill?: string, stroke?: string, strokeWidth?: number, viewBox: string } & Omit<JSX.HtmlTag, "className"> & import("../common/props").CLSXClassProps}
 */

/**
 * SVG component props
 * @type {import("../common/props").JSXComponent<SVGProps>}
 */
export function SVG(props) {
    const {
        children,
        class: className,
        fill = "none",
        stroke = "currentColor",
        strokeWidth = 0.5,
        ...restProps
        } = props;
    return (
        <svg
            xmlns="http://www.w3.org/2000/svg"
            fill={fill}
            stroke={stroke}
            class={className}
            style={{ strokeWidth: String(strokeWidth) }}
            {...restProps}
        >
            {children}
        </svg>
    )
}

	
	--------------------     Sidebar Component   -------------------------

		import { Button } from "./button.component";
import { Icon } from "./icon.component";
import clsx from "clsx";

/**
 * @typedef {Object} SidebarTriggerProps
 * @type {import("./button.component").ButtonProps}
 */

/**
 * @typedef {Object} SidebarContentProps
 * @type {{ selector?: string, title?: string } & import("../common/props").PositionProps & import("../common/props").HTMLTagWithChildren}
 */

/**
 * Sidebar Trigger component props
 * @type {import("../common/props").JSXComponent<SidebarTriggerProps>}
 */
export function SidebarTrigger(props) {
	const { ...restProps } = props;

	return (
		<div class="inline-flex items-center justify-center">
			<Button x-bind="trigger" {...restProps} />
		</div>
	);
}

/**
 * Sidebar Content component props
 * @type {import("../common/props").JSXComponent<SidebarContentProps>}
 */
export function SidebarContent(props) {
	const {
		children,
		selector = "body",
		title,
		position = "right",
		class: className
	} = props;

	/**
	 * @type {Map<import("../common/types").PositionType, string>}
	 */
	const positionClassMap = new Map([
		["right", "right-0"],
		["left", "left-0"],
		["top", "top-0"],
		["bottom", "bottom-0"]
	]);

	/**
	 * @type {Map<import("../common/types").PositionType, import("../common/types").TransitionStateType>}
	 */
	const transitionClassMap = new Map([
		[
			"right",
			{
				enter: {
					start: "translate-x-full opacity-0",
					end: "translate-x-0 opacity-100"
				},
				leave: {
					start: "translate-x-0 opacity-100",
					end: "translate-x-full opacity-0"
				}
			}
		],
		[
			"left",
			{
				enter: {
					start: "-translate-x-full opacity-0",
					end: "translate-x-0 opacity-100"
				},
				leave: {
					start: "translate-x-0 opacity-100",
					end: "-translate-x-full opacity-0"
				}
			}
		],
		[
			"top",
			{
				enter: {
					start: "-translate-y-full opacity-0",
					end: "translate-y-0 opacity-100"
				},
				leave: {
					start: "translate-y-0 opacity-100",
					end: "-translate-y-full opacity-0"
				}
			}
		],
		[
			"bottom",
			{
				enter: {
					start: "translate-y-full opacity-0",
					end: "translate-y-0 opacity-100"
				},
				leave: {
					start: "translate-y-0 opacity-100",
					end: "translate-y-full opacity-0"
				}
			}
		]
	]);

	return (
		<div
			x-bind="shower"
			class={clsx(
				"top-0 left-0 flex items-center justify-center",
				selector !== "body"
					? "absolute w-full h-full"
					: "fixed w-screen h-screen z-[99]"
			)}
		>
			<div
				x-bind="shower"
				x-transition:enter="ease-out duration-300"
				x-transition:enter-start="opacity-0"
				x-transition:enter-end="opacity-100"
				x-transition:leave="ease-in duration-300"
				x-transition:leave-start="opacity-100"
				x-transition:leave-end="opacity-0"
				x-on:click="close()"
				class="absolute inset-0 w-full h-full bg-overlay-dark/75"
			/>
			<div
				x-bind="shower"
				x-transition:enter="transition ease-in-out duration-500 sm:duration-700"
				x-transition:enter-start={transitionClassMap.get(position)?.enter.start}
				x-transition:enter-end={transitionClassMap.get(position)?.enter.end}
				x-transition:leave="transition ease-in-out duration-500 sm:duration-700"
				x-transition:leave-start={transitionClassMap.get(position)?.leave.start}
				x-transition:leave-end={transitionClassMap.get(position)?.leave.end}
				class={clsx(
					"absolute inset-O flex flex-col gap-y-2 h-full overflow-y-scroll bg-background border-base-dark/70",
					positionClassMap.get(position),
					className
				)}
			>
				<div class="flex items-center justify-between w-full p-2 sm:p-4">
					{title ? (
						<h2
							class="text-base font-semibold leading-6 w-full"
							id="slide-over-title"
							safe
						>
							{title}
						</h2>
					) : null}
					<div class="flex items-center justify-end w-full">
						<button
							x-bind="closerClick"
							class="flex items-center justify-between px-3 py-2 gap-x-2 text-xs font-medium uppercase bg-background text-muted-foreground rounded-md hover:text-foreground"
						>
							<Icon name="ri.close-line" />
							<span>Close</span>
						</button>
					</div>
				</div>
				{children}
			</div>
		</div>
	);
}

/**
 * Sidebar Content component props
 * @type {import("../common/props").JSXComponent<import("../common/props").HTMLTagWithChildren>}
 */
export function Sidebar(props) {
	const { children, ...restProps } = props;
	return (
		<div x-data="sidebar" x-bind="closerEscape" {...restProps}>
			{children}
		</div>
	);
}

	
	
	--------------------     Alpine Dependencies   -------------------------

		/**
 * @typedef {Object} SidebarDataOutput
 * @property {boolean} show
 * @property {Function} close
 * @property {Function} open
 * @property {Record<string, () => boolean>} shower
 * @property {Record<string, Function>} trigger
 * @property {Record<string, Function>} closerClick
 * @property {Record<string, Function>} closerEscape
 */

/**
 * Sidebar alpine data
 * @returns {import("alpinejs").AlpineComponent<SidebarDataOutput>}
 */
export function sidebarData() {
  return {
		destroy() {
			this.show = false;
		},
		show: false,
		close() {
			this.show = false;
		},
		open() {
			this.show = true;
		},
		shower: {
			["x-show"]() {
				return this.show;
			}
		},
		trigger: {
			["@click"]() {
				this.open();
			}
		},
		closerClick: {
			["@click"]() {
				this.close();
			}
		},
		closerEscape: {
			["@keydown.escape.window"]() {
				this.close();
			}
		}
	};
}