@yuzu-jobs/ui-components 0.0.1

package/README.md

@@ -0,0 +1,40 @@
+# Astro Starter Kit: Component Package
+
+This is a template for an Astro component library. Use this template for writing components to use in multiple projects or publish to NPM.
+
+```sh
+npm create astro@latest -- --template component
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── index.ts
+├── src
+│   └── MyComponent.astro
+├── tsconfig.json
+├── package.json
+```
+
+The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command       | Action                                                                                                                                                                                                                           |
+| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `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

@@ -0,0 +1,9 @@
+// Do not write code directly here, instead use the `src` folder!
+// Then, use this file to export everything you want your user to access.
+
+import InputText from "./src/InputText.astro";
+import InputContainer from "./src/InputContainer.astro";
+import InputLabel from "./src/InputLabel.astro";
+import Alert from "./src/Alert.astro";
+
+export { InputText, InputContainer, InputLabel, Alert };

package/package.json

@@ -0,0 +1,33 @@
+{
+	"name": "@yuzu-jobs/ui-components",
+	"engines": {
+		"node": ">=22.12.0"
+	},
+	"version": "0.0.1",
+	"type": "module",
+	"exports": {
+		".": "./index.ts"
+	},
+	"files": [
+		"src",
+		"index.ts"
+	],
+	"keywords": [
+		"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"
+	},
+	"devDependencies": {
+		"@lucide/astro": "^1.6.0",
+		"@tailwindcss/vite": "^4.2.2",
+		"astro": "^6.1.3",
+		"tailwindcss": "^4.2.2"
+	},
+	"peerDependencies": {
+		"astro": "^5.0.0 || ^6.0.0",
+		"tailwindcss": "^4.0.0"
+	}
+}

package/src/Alert.astro

@@ -0,0 +1,52 @@
+---
+import { CircleCheck, CircleAlert, Info, TriangleAlert } from "@lucide/astro";
+
+type Variant = "success" | "error" | "warning" | "info";
+
+interface Props {
+	variant: Variant;
+	class?: string;
+	id?: string;
+}
+
+const { variant, class: className, id } = Astro.props;
+
+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",
+};
+
+const iconClasses: Record<Variant, string> = {
+	success: "text-emerald-500",
+	error: "text-red-500",
+	warning: "text-amber-500",
+	info: "text-indigo-500",
+};
+
+const icons: Record<Variant, typeof CircleCheck> = {
+	success: CircleCheck,
+	error: CircleAlert,
+	warning: TriangleAlert,
+	info: Info,
+};
+
+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",
+		variantClasses[variant],
+		className,
+	]}
+>
+	<span class:list={["mt-0.5 shrink-0", iconClasses[variant]]}>
+		<Icon size={16} />
+	</span>
+	<span class="leading-relaxed">
+		<slot />
+	</span>
+</div>

package/src/InputContainer.astro

@@ -0,0 +1,3 @@
+<div class="flex flex-col mb-6">
+	<slot />
+</div>

package/src/InputLabel.astro

@@ -0,0 +1,14 @@
+---
+interface Props {
+	text: string;
+	inputId: string;
+	required?: boolean;
+}
+
+const { text, inputId, required } = Astro.props;
+---
+
+<label class="text-sm font-semibold" for={inputId}>
+	{text}
+	{required && <span class="text-red-500 text-lg">*</span>}
+</label>

package/src/InputText.astro

@@ -0,0 +1,61 @@
+---
+interface Props {
+	id: string;
+	name: string;
+	placeholder?: string;
+	required?: boolean;
+	type?: "text" | "email" | "password" | "number" | "tel" | "url";
+	value?: string;
+	maxLength?: number;
+	minLength?: number;
+	autocomplete?: string;
+}
+
+const {
+	id,
+	name,
+	placeholder,
+	required,
+	type,
+	value,
+	maxLength,
+	minLength,
+	autocomplete,
+} = Astro.props;
+
+const className =
+	"p-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent";
+---
+
+{
+	type == "number" && (
+		<input
+			class={className}
+			type={type ?? "text"}
+			step="0.01"
+			id={id}
+			name={name}
+			placeholder={placeholder ?? ""}
+			required={required ?? false}
+			value={value ?? ""}
+			autocomplete={autocomplete}
+		/>
+	)
+}
+
+{
+	type != "number" && (
+		<input
+			class={className}
+			type={type ?? "text"}
+			id={id}
+			name={name}
+			placeholder={placeholder ?? ""}
+			required={required ?? false}
+			value={value ?? ""}
+			maxlength={maxLength ?? 500}
+			minlength={minLength ?? 0}
+			autocomplete={autocomplete}
+		/>
+	)
+}