@yuzu-jobs/ui-components 0.1.0 → 0.2.0

package/index.ts

@@ -6,11 +6,19 @@ import InputSelect from "./src/InputSelect.astro";
 import InputSwitch from "./src/InputSwitch.astro";
 import InputContainer from "./src/InputContainer.astro";
 import InputLabel from "./src/InputLabel.astro";
+import InputChips from "./src/InputChips.astro";
+import InputRadio from "./src/InputRadio.astro";
+import InputTextarea from "./src/InputTextarea.astro";
 import Alert from "./src/Alert.astro";
 import ProgressBar from "./src/ProgressBar.astro";
 import Button from "./src/Button.astro";
 import ProfileSetupFlowHeader from "./src/ProfileSetupFlowHeader.astro";
 import StatusDot from "./src/StatusDot.astro";
+import DashboardSidebarNavItem from "./src/DashboardSidebarNavItem.astro";
+import PageTabs from "./src/PageTabs.astro";
+import Pagination from "./src/Pagination.astro";
+import BackLink from "./src/BackLink.astro";
+import JobSalary from "./src/JobSalary.astro";
 
 export {
 	Button,
@@ -20,7 +28,15 @@ export {
 	InputSwitch,
 	InputContainer,
 	InputLabel,
+	InputChips,
+	InputRadio,
+	InputTextarea,
 	Alert,
 	ProgressBar,
 	ProfileSetupFlowHeader,
+	DashboardSidebarNavItem,
+	PageTabs,
+	Pagination,
+	BackLink,
+	JobSalary,
 };

package/package.json

@@ -3,7 +3,7 @@
 	"engines": {
 		"node": ">=22.12.0"
 	},
-	"version": "0.1.0",
+	"version": "0.2.0",
 	"type": "module",
 	"exports": {
 		".": "./index.ts",

package/src/BackLink.astro

@@ -0,0 +1,18 @@
+---
+import { ArrowLeft } from "@lucide/astro";
+
+interface Props {
+	href: string;
+	label: string;
+}
+
+const { href, label } = Astro.props;
+---
+
+<a
+	href={href}
+	class="inline-flex items-center gap-1.5 mb-2 text-sm text-slate-500 hover:text-brand-600 transition-colors group"
+>
+	<ArrowLeft class="w-3.5 h-3.5 transition-transform group-hover:-translate-x-0.5" />
+	{label}
+</a>

package/src/DashboardSidebarNavItem.astro

@@ -0,0 +1,33 @@
+---
+import type { AstroComponentFactory } from "astro/runtime/server/index.js";
+
+interface Props {
+	name: string;
+	href: string;
+	icon: AstroComponentFactory;
+	isActive: boolean;
+}
+
+const { name, href, icon: Icon, isActive } = Astro.props;
+---
+
+<li class="flex">
+	<a
+		class={`relative w-full px-3 py-2.5 flex items-center gap-3 rounded-md text-sm font-sans transition-colors ${
+			isActive
+				? "bg-brand-500/15 text-white"
+				: "text-ink-300 hover:bg-white/5 hover:text-white"
+		}`}
+		href={href}
+	>
+		{
+			isActive && (
+				<span class="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-5 bg-brand-500" />
+			)
+		}
+		<span class={isActive ? "text-brand-400" : "text-ink-400"}>
+			<Icon size={16} />
+		</span>
+		{name}
+	</a>
+</li>

package/src/InputChips.astro

@@ -0,0 +1,73 @@
+---
+interface Option {
+	value: string;
+	label: string;
+}
+
+interface Props {
+	name: string;
+	options: Option[];
+	values?: string[];
+	required?: boolean;
+	locked?: boolean;
+	lockedValues?: string[];
+}
+
+const {
+	name,
+	options,
+	values = [],
+	required,
+	locked = false,
+	lockedValues = [],
+} = Astro.props;
+
+const activeValues = locked ? lockedValues : values;
+---
+
+<div class="flex flex-wrap gap-2" data-chips-name={name}>
+	{
+		locked &&
+			lockedValues.map((value) => (
+				<input type="hidden" name={name} value={value} />
+			))
+	}
+	{
+		options.map((option) => {
+			const inputId = `${name}-${option.value}`;
+			const isChecked = activeValues.includes(option.value);
+			return (
+				<label
+					class:list={[
+						"group",
+						locked ? "cursor-not-allowed" : "cursor-pointer",
+					]}
+					for={inputId}
+				>
+					<input
+						class="sr-only peer"
+						type="checkbox"
+						id={inputId}
+						name={locked ? undefined : name}
+						value={option.value}
+						checked={isChecked}
+						disabled={locked}
+						required={!locked && required && option.value === activeValues[0]}
+					/>
+					<span
+						class:list={[
+							"inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium border transition-colors",
+							locked
+								? isChecked
+									? "bg-primary border-primary text-white opacity-50 cursor-not-allowed"
+									: "bg-white border-slate-200 text-slate-400 opacity-50 cursor-not-allowed"
+								: "bg-white border-slate-200 text-slate-600 cursor-pointer peer-checked:bg-primary peer-checked:border-primary peer-checked:text-white group-hover:border-primary group-hover:text-primary peer-checked:group-hover:text-white peer-focus-visible:ring-2 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-2",
+						]}
+					>
+						{option.label}
+					</span>
+				</label>
+			);
+		})
+	}
+</div>

package/src/InputRadio.astro

@@ -0,0 +1,40 @@
+---
+interface Option {
+    id: string;
+    value: string;
+    label: string;
+}
+
+interface Props {
+    name: string;
+    options: Option[];
+    required?: boolean;
+    defaultValue?: string;
+}
+
+const { name, options, required, defaultValue } = Astro.props;
+---
+
+<div class="flex flex-col gap-2">
+    {
+        options.map((option) => (
+            <label
+                class="flex items-center gap-3 cursor-pointer group"
+                for={option.id}
+            >
+                <input
+                    class="w-4 h-4 border-slate-200 accent-primary focus:ring-2 focus:ring-primary focus:ring-offset-1 cursor-pointer"
+                    type="radio"
+                    id={option.id}
+                    name={name}
+                    value={option.value}
+                    required={required ?? false}
+                    checked={option.value === defaultValue}
+                />
+                <span class="text-sm group-hover:text-primary transition-colors">
+                    {option.label}
+                </span>
+            </label>
+        ))
+    }
+</div>

package/src/InputTextarea.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+    id: string;
+    name: string;
+    placeholder?: string;
+    required?: boolean;
+    value?: string;
+    rows?: number;
+    maxLength?: number;
+    minLength?: number;
+}
+
+const { id, name, placeholder, required, value, rows, maxLength, minLength } =
+    Astro.props;
+
+const className =
+    "p-2 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-y";
+---
+
+<textarea
+    class={className}
+    id={id}
+    name={name}
+    placeholder={placeholder ?? ""}
+    required={required ?? false}
+    rows={rows ?? 4}
+    maxlength={maxLength ?? 2000}
+    minlength={minLength ?? 0}
+>{value ?? ""}</textarea>

package/src/JobSalary.astro

@@ -0,0 +1,47 @@
+---
+type SalaryUnitType = "HOUR" | "DAY" | "WEEK" | "MONTH" | "YEAR";
+
+interface Props {
+	min?: number;
+	max?: number;
+	/** Accepts plain strings from loosely-typed API payloads; unknown values
+	    render without a unit suffix. */
+	unitType?: SalaryUnitType | (string & {});
+	class?: string;
+}
+
+const { min, max, unitType, class: className } = Astro.props;
+
+const formatSalary = (amount: number) => {
+	if (amount >= 100_000) {
+		return `$${amount / 1000}K`;
+	}
+	return new Intl.NumberFormat("en-US", {
+		style: "currency",
+		currency: "USD",
+		minimumFractionDigits: amount % 1 === 0 ? 0 : 2,
+		maximumFractionDigits: amount % 1 === 0 ? 0 : 2,
+	}).format(amount);
+};
+
+const salaryUnitLabel: Record<SalaryUnitType, string> = {
+	HOUR: "/hr",
+	DAY: "/day",
+	WEEK: "/wk",
+	MONTH: "/mo",
+	YEAR: "/yr",
+};
+
+const range = (() => {
+	const unit =
+		unitType && unitType in salaryUnitLabel
+			? salaryUnitLabel[unitType as SalaryUnitType]
+			: "";
+	if (min && max) return `${formatSalary(min)} – ${formatSalary(max)}${unit}`;
+	if (min) return `From ${formatSalary(min)}${unit}`;
+	if (max) return `Up to ${formatSalary(max)}${unit}`;
+	return null;
+})();
+---
+
+{range && <span class={className}>{range}</span>}

package/src/PageTabs.astro

@@ -0,0 +1,43 @@
+---
+interface Tab {
+	label: string;
+	href: string;
+	/** Optional notification badge count — only shown when > 0 */
+	badge?: number;
+}
+
+interface Props {
+	tabs: Tab[];
+	/** The href of the currently active tab (exact match) */
+	activeHref: string;
+}
+
+const { tabs, activeHref } = Astro.props;
+---
+
+<div class="bg-white border-b border-slate-200 px-4 md:px-8">
+	<nav class="flex -mb-px">
+		{
+			tabs.map((tab) => {
+				const isActive = tab.href === activeHref;
+				return (
+					<a
+						href={tab.href}
+						class={`inline-flex items-center gap-2 px-4 py-3 text-sm font-medium font-sans border-b-2 transition-colors ${
+							isActive
+								? "border-brand-600 text-brand-700"
+								: "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300"
+						}`}
+					>
+						{tab.label}
+						{tab.badge !== undefined && tab.badge > 0 && (
+							<span class="inline-flex items-center justify-center min-w-[1.1rem] h-[1.1rem] px-1 rounded-full text-xs font-bold bg-amber-400 text-amber-900 leading-none">
+								{tab.badge}
+							</span>
+						)}
+					</a>
+				);
+			})
+		}
+	</nav>
+</div>

package/src/Pagination.astro

@@ -0,0 +1,106 @@
+---
+import { ChevronLeft, ChevronRight } from "@lucide/astro";
+
+interface Props {
+	currentPage: number;
+	totalPages: number;
+}
+
+const { currentPage, totalPages } = Astro.props;
+
+function pageHref(page: number): string {
+	const url = new URL(Astro.url);
+	url.searchParams.set("page", String(page));
+	return url.pathname + url.search;
+}
+
+function getPageNumbers(current: number, total: number): (number | "...")[] {
+	if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
+
+	const set = new Set(
+		[1, total, current - 1, current, current + 1].filter(
+			(p) => p >= 1 && p <= total,
+		),
+	);
+	const sorted = Array.from(set).sort((a, b) => a - b);
+
+	const result: (number | "...")[] = [];
+	for (let i = 0; i < sorted.length; i++) {
+		if (i > 0 && sorted[i] - sorted[i - 1] > 1) result.push("...");
+		result.push(sorted[i]);
+	}
+	return result;
+}
+
+const pages = getPageNumbers(currentPage, totalPages);
+const hasPrev = currentPage > 1;
+const hasNext = currentPage < totalPages;
+---
+
+<nav aria-label="Pagination" class="flex items-center justify-center gap-1">
+	<!-- Previous -->
+	{
+		hasPrev ? (
+			<a
+				href={pageHref(currentPage - 1)}
+				aria-label="Previous page"
+				class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-slate-500 hover:bg-brand-50 hover:text-brand-700 transition-colors"
+			>
+				<ChevronLeft class="w-4 h-4" />
+			</a>
+		) : (
+			<span
+				aria-disabled="true"
+				class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-slate-300 cursor-not-allowed"
+			>
+				<ChevronLeft class="w-4 h-4" />
+			</span>
+		)
+	}
+
+	<!-- Page numbers -->
+	{
+		pages.map((page) =>
+			page === "..." ? (
+				<span class="inline-flex items-center justify-center w-9 h-9 text-sm text-slate-400 select-none">
+					&hellip;
+				</span>
+			) : page === currentPage ? (
+				<span
+					aria-current="page"
+					class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-sm font-semibold bg-brand-600 text-white"
+				>
+					{page}
+				</span>
+			) : (
+				<a
+					href={pageHref(page)}
+					aria-label={`Page ${page}`}
+					class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-sm text-slate-600 hover:bg-brand-50 hover:text-brand-700 transition-colors"
+				>
+					{page}
+				</a>
+			),
+		)
+	}
+
+	<!-- Next -->
+	{
+		hasNext ? (
+			<a
+				href={pageHref(currentPage + 1)}
+				aria-label="Next page"
+				class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-slate-500 hover:bg-brand-50 hover:text-brand-700 transition-colors"
+			>
+				<ChevronRight class="w-4 h-4" />
+			</a>
+		) : (
+			<span
+				aria-disabled="true"
+				class="inline-flex items-center justify-center w-9 h-9 rounded-lg text-slate-300 cursor-not-allowed"
+			>
+				<ChevronRight class="w-4 h-4" />
+			</span>
+		)
+	}
+</nav>