@yuzu-jobs/ui-components 0.0.8 → 0.2.0

package/index.ts

@@ -6,19 +6,37 @@ 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,
+	StatusDot,
 	InputText,
 	InputSelect,
 	InputSwitch,
 	InputContainer,
 	InputLabel,
+	InputChips,
+	InputRadio,
+	InputTextarea,
 	Alert,
 	ProgressBar,
 	ProfileSetupFlowHeader,
+	DashboardSidebarNavItem,
+	PageTabs,
+	Pagination,
+	BackLink,
+	JobSalary,
 };

package/package.json

@@ -3,14 +3,16 @@
 	"engines": {
 		"node": ">=22.12.0"
 	},
-	"version": "0.0.8",
+	"version": "0.2.0",
 	"type": "module",
 	"exports": {
-		".": "./index.ts"
+		".": "./index.ts",
+		"./theme.css": "./theme.css"
 	},
 	"files": [
 		"src",
-		"index.ts"
+		"index.ts",
+		"theme.css"
 	],
 	"keywords": [
 		"astro-component"

package/src/Alert.astro

@@ -15,14 +15,14 @@ const variantClasses: Record<Variant, string> = {
 	success: "bg-emerald-50 border-emerald-500 text-emerald-800",
 	error: "bg-red-50 border-red-500 text-red-800",
 	warning: "bg-amber-50 border-amber-500 text-amber-800",
-	info: "bg-indigo-50 border-indigo-500 text-indigo-800",
+	info: "bg-brand-50 border-brand-500 text-brand-800",
 };
 
 const iconClasses: Record<Variant, string> = {
 	success: "text-emerald-500",
 	error: "text-red-500",
 	warning: "text-amber-500",
-	info: "text-indigo-500",
+	info: "text-brand-500",
 };
 
 const icons: Record<Variant, typeof CircleCheck> = {
@@ -38,7 +38,7 @@ const Icon = icons[variant];
 <div
 	id={id}
 	class:list={[
-		"flex items-start gap-3 border border-transparent border-l-4 px-4 py-3 rounded-lg text-sm font-sans shadow-sm",
+		"flex items-start gap-3 border border-transparent border-l-4 px-4 py-3 rounded-lg text-sm font-sans",
 		variantClasses[variant],
 		className,
 	]}

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/Button.astro

@@ -3,7 +3,7 @@ interface Props {
 	id?: string;
 	href?: string;
 	type?: "button" | "submit" | "reset";
-	variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+	variant?: "primary" | "accent" | "secondary" | "outline" | "ghost" | "danger";
 	size?: "sm" | "md" | "lg";
 	disabled?: boolean;
 	fullWidth?: boolean;
@@ -28,20 +28,23 @@ const {
 } = Astro.props;
 
 const variantClasses = {
-	// Filled — solid background, white text. Use for primary CTAs on any background.
+	// Filled ink — solid background, white text. Use for primary CTAs on light backgrounds.
 	primary:
-		"bg-indigo-600 hover:bg-indigo-700 text-white border border-transparent",
+		"bg-primary hover:bg-primary-hover text-white border border-transparent",
+	// Filled teal — the brand accent. Use sparingly (e.g. spoke "Join free" CTA).
+	accent:
+		"bg-accent hover:bg-accent-hover text-white border border-transparent",
 	// Danger — filled red, white text. Use for destructive actions.
 	danger: "bg-red-600 hover:bg-red-700 text-white border border-transparent",
-	// Outline — dark border and text on transparent background. Use for secondary actions on light backgrounds.
+	// Outline — ink text, hairline border. Use for secondary actions on light backgrounds.
 	secondary:
-		"text-gray-700 border border-gray-300 hover:bg-gray-100 hover:border-gray-400 hover:text-gray-900",
+		"text-ink-900 border border-slate-300 hover:bg-slate-50 hover:border-slate-400",
 	// Alias for secondary
 	outline:
-		"text-gray-700 border border-gray-300 hover:bg-gray-100 hover:border-gray-400 hover:text-gray-900",
-	// Ghost — subtle indigo outline on transparent background. Use for actions on dark/indigo backgrounds.
+		"text-ink-900 border border-slate-300 hover:bg-slate-50 hover:border-slate-400",
+	// Ghost — subtle teal outline on transparent background. Use for actions on dark (ink) surfaces.
 	ghost:
-		"text-indigo-200 border border-indigo-500/50 hover:bg-indigo-500/20 hover:text-white hover:border-indigo-400",
+		"text-brand-200 border border-brand-500/50 hover:bg-brand-500/20 hover:text-white hover:border-brand-400",
 };
 
 const sizeClasses = {
@@ -51,7 +54,7 @@ const sizeClasses = {
 };
 
 const classes = [
-	"inline-flex items-center gap-1.5 rounded-lg font-sans font-medium cursor-pointer transition-colors",
+	"inline-flex items-center gap-1.5 rounded-md font-sans font-medium cursor-pointer transition-colors",
 	"disabled:opacity-40 disabled:cursor-not-allowed",
 	variantClasses[variant],
 	sizeClasses[size],

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>

package/src/ProfileSetupFlowHeader.astro

@@ -11,19 +11,19 @@ interface Props {
 const { step, totalSteps, title, userRole } = Astro.props;
 ---
 
-<div class="bg-indigo-900 border-b border-indigo-800/60">
+<div class="bg-ink-900 border-b border-ink-800/60">
 	<div class="container mx-auto max-w-3xl px-8 py-6">
 		<div class="flex items-center gap-3 mb-4">
-			<span class="text-indigo-400 text-sm font-sans">Account setup</span>
-			<span class="text-indigo-700">/</span>
-			<span class="text-indigo-200 text-sm font-sans"
+			<span class="text-ink-300 text-sm font-sans">Account setup</span>
+			<span class="text-ink-500">/</span>
+			<span class="text-ink-200 text-sm font-sans"
 				>{userRole == "recruiter" ? "Recruiter" : "Candidate"} profile</span
 			>
 		</div>
 
 		<div class="mb-5">
 			<p
-				class="text-indigo-400 text-xs font-sans uppercase tracking-widest font-semibold mb-1"
+				class="text-brand-400 text-[11px] font-mono uppercase tracking-[0.08em] font-semibold mb-1"
 			>
 				Step {step} of {totalSteps}
 			</p>

package/src/ProgressBar.astro

@@ -9,9 +9,9 @@ const { totalSteps, currentStep, class: className } = Astro.props;
 ---
 
 <div class:list={[className]}>
-	<div class="w-full bg-gray-200 rounded-full h-2">
+	<div class="w-full bg-slate-200/40 rounded-full h-2">
 		<div
-			class="bg-primary h-2 rounded-full"
+			class="bg-brand-500 h-2 rounded-full"
 			style={`width: ${Math.max(8, ((currentStep - 1) / totalSteps) * 100)}%`}
 		>
 		</div>

package/src/StatusDot.astro

@@ -0,0 +1,33 @@
+---
+// Status indicator: colored dot + plain text (replaces pill badges).
+// Semantic colors per the Precision theme: emerald=active/success,
+// slate=draft/neutral, amber=closed/attention, teal=pending, red=error.
+type Color = "emerald" | "slate" | "amber" | "teal" | "red";
+
+interface Props {
+	color: Color;
+	label: string;
+	class?: string;
+}
+
+const { color, label, class: className } = Astro.props;
+
+const dotClasses: Record<Color, string> = {
+	emerald: "bg-emerald-500",
+	slate: "bg-slate-400",
+	amber: "bg-amber-500",
+	teal: "bg-brand-500",
+	red: "bg-red-500",
+};
+---
+
+<span
+	class:list={[
+		"inline-flex items-center gap-1.5 text-[13px] font-sans text-slate-600 whitespace-nowrap",
+		className,
+	]}
+>
+	<span class:list={["w-1.5 h-1.5 rounded-full shrink-0", dotClasses[color]]}
+	></span>
+	{label}
+</span>

package/theme.css

@@ -0,0 +1,61 @@
+/*
+ * Shared "Precision" design tokens for mizu.health (hub) and the spoke sites.
+ * Consumers @import this after tailwindcss in their global.css:
+ *
+ *   @import "tailwindcss";
+ *   @import "@yuzu-jobs/ui-components/theme.css";
+ *
+ * The --font-schibsted-grotesk / --font-spline-sans-mono variables are
+ * provided by each app's astro.config.mjs fonts entry (astro:assets <Font>).
+ */
+@theme {
+	--font-sans: var(--font-schibsted-grotesk), ui-sans-serif, system-ui,
+		sans-serif;
+	--font-mono: var(--font-spline-sans-mono), ui-monospace, monospace;
+
+	/* Brand = teal (accent) scale, built from the logo node #0E8FA6 */
+	--color-brand-50: #eff6f8;
+	--color-brand-100: #ddf3f6;
+	--color-brand-200: #b6e0e7;
+	--color-brand-300: #7cc6d2;
+	--color-brand-400: #3faabc;
+	--color-brand-500: #14b0c6; /* bright accent — dark surfaces */
+	--color-brand-600: #0e8fa6; /* the logo node — primary accent */
+	--color-brand-700: #0b6e80;
+	--color-brand-800: #0a5866;
+	--color-brand-900: #0a4854;
+	--color-brand-950: #06222e;
+
+	/* Ink = structural navy (nav, sidebar, headings, primary buttons) */
+	--color-ink-50: #f4f7fa;
+	--color-ink-100: #e7edf3;
+	--color-ink-200: #c4d2df;
+	--color-ink-300: #93a9bd;
+	--color-ink-400: #5f7b94;
+	--color-ink-500: #3d5a75;
+	--color-ink-600: #28425c;
+	--color-ink-700: #1a344c;
+	--color-ink-800: #142c42;
+	--color-ink-900: #0f2e4c; /* the logo ink */
+	--color-ink-950: #0a1f33;
+
+	/* Semantic */
+	--color-primary: var(--color-ink-900); /* primary buttons are INK, not teal */
+	--color-primary-hover: var(--color-ink-700);
+	--color-accent: var(--color-brand-600); /* links, data, highlights */
+	--color-accent-hover: var(--color-brand-700);
+
+	/* Neutrals: the theme standardizes on slate. gray-* utilities are aliased
+	   to slate so existing markup renders correctly; prefer slate-* in new code. */
+	--color-gray-50: var(--color-slate-50);
+	--color-gray-100: var(--color-slate-100);
+	--color-gray-200: var(--color-slate-200);
+	--color-gray-300: var(--color-slate-300);
+	--color-gray-400: var(--color-slate-400);
+	--color-gray-500: var(--color-slate-500);
+	--color-gray-600: var(--color-slate-600);
+	--color-gray-700: var(--color-slate-700);
+	--color-gray-800: var(--color-slate-800);
+	--color-gray-900: var(--color-slate-900);
+	--color-gray-950: var(--color-slate-950);
+}