@yuzu-jobs/ui-components 0.0.1 → 0.0.2

package/README.md

@@ -33,8 +33,3 @@ All commands are run from the root of the project, from a terminal:
 | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `npm link`    | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components                                                                                                               |
 | `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser) |
-
-## Publishing
-
-- `npm login`
-- `npm run release patch` (or `minor` or `major` depending on the type of release)

package/index.ts

@@ -5,5 +5,7 @@ import InputText from "./src/InputText.astro";
 import InputContainer from "./src/InputContainer.astro";
 import InputLabel from "./src/InputLabel.astro";
 import Alert from "./src/Alert.astro";
+import ProgressBar from "./src/ProgressBar.astro";
+import Button from "./src/Button.astro";
 
-export { InputText, InputContainer, InputLabel, Alert };
+export { Button, InputText, InputContainer, InputLabel, Alert, ProgressBar };

package/package.json

@@ -3,7 +3,7 @@
 	"engines": {
 		"node": ">=22.12.0"
 	},
-	"version": "0.0.1",
+	"version": "0.0.2",
 	"type": "module",
 	"exports": {
 		".": "./index.ts"
@@ -16,9 +16,9 @@
 		"astro-component"
 	],
 	"scripts": {
-		"release:patch": "npm version patch --no-git-tag-version && npm publish --access public",
-		"release:minor": "npm version minor --no-git-tag-version && npm publish --access public",
-		"release:major": "npm version major --no-git-tag-version && npm publish --access public"
+		"release:patch": "npm version patch && npm publish --access public",
+		"release:minor": "npm version minor && npm publish --access public",
+		"release:major": "npm version major && npm publish --access public"
 	},
 	"devDependencies": {
 		"@lucide/astro": "^1.6.0",

package/src/Button.astro

@@ -0,0 +1,83 @@
+---
+interface Props {
+	id?: string;
+	href?: string;
+	type?: "button" | "submit" | "reset";
+	variant?: "primary" | "secondary" | "outline" | "ghost" | "danger";
+	size?: "sm" | "md" | "lg";
+	disabled?: boolean;
+	fullWidth?: boolean;
+	class?: string;
+	name?: string;
+	value?: string;
+	[key: string]: unknown;
+}
+
+const {
+	id,
+	href,
+	type = "button",
+	variant = "primary",
+	size = "md",
+	disabled = false,
+	fullWidth = false,
+	class: className,
+	name,
+	value,
+	...rest
+} = Astro.props;
+
+const variantClasses = {
+	// Filled — solid background, white text. Use for primary CTAs on any background.
+	primary:
+		"bg-indigo-600 hover:bg-indigo-700 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.
+	secondary:
+		"text-gray-700 border border-gray-300 hover:bg-gray-100 hover:border-gray-400 hover:text-gray-900",
+	// 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.
+	ghost:
+		"text-indigo-200 border border-indigo-500/50 hover:bg-indigo-500/20 hover:text-white hover:border-indigo-400",
+};
+
+const sizeClasses = {
+	sm: "px-3 py-1 text-sm",
+	md: "px-4 py-1.5 text-sm",
+	lg: "px-6 py-2.5 text-base font-medium",
+};
+
+const classes = [
+	"inline-flex items-center gap-1.5 rounded-lg font-sans font-medium cursor-pointer transition-colors",
+	"disabled:opacity-40 disabled:cursor-not-allowed",
+	variantClasses[variant],
+	sizeClasses[size],
+	fullWidth ? "w-full justify-center" : "",
+	className,
+]
+	.filter(Boolean)
+	.join(" ");
+---
+
+{
+	href ? (
+		<a id={id} href={href} class={classes} {...rest}>
+			<slot />
+		</a>
+	) : (
+		<button
+			id={id}
+			type={type}
+			class={classes}
+			disabled={disabled}
+			name={name}
+			value={value}
+			{...rest}
+		>
+			<slot />
+		</button>
+	)
+}

package/src/ProfileSetupFlowHeader.astro

@@ -0,0 +1,37 @@
+---
+import ProgressBar from "./ProgressBar.astro";
+
+interface Props {
+	step: number;
+	totalSteps: number;
+	title: string;
+	userRole: "recruiter" | "candidate";
+}
+
+const { step, totalSteps, title, userRole } = Astro.props;
+---
+
+<div class="bg-indigo-900 border-b border-indigo-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"
+				>{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"
+			>
+				Step {step} of {totalSteps}
+			</p>
+			<h1 class="text-white text-2xl font-sans font-semibold tracking-wide">
+				{title}
+			</h1>
+		</div>
+
+		<ProgressBar currentStep={step} totalSteps={totalSteps} />
+	</div>
+</div>

package/src/ProgressBar.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+	totalSteps: number;
+	currentStep: number;
+	class?: string;
+}
+
+const { totalSteps, currentStep, class: className } = Astro.props;
+---
+
+<div class:list={[className]}>
+	<div class="w-full bg-gray-200 rounded-full h-2">
+		<div
+			class="bg-primary h-2 rounded-full"
+			style={`width: ${Math.max(8, ((currentStep - 1) / totalSteps) * 100)}%`}
+		>
+		</div>
+	</div>
+</div>