@febkosq8/arc 0.3.0

package/.prettierrc

@@ -0,0 +1,8 @@
+{
+    "tabWidth": 4,
+    "printWidth": 120,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "plugins": ["prettier-plugin-organize-imports"]
+}

package/README.md

@@ -0,0 +1,5 @@
+# ARC
+
+This is a component library that will be used in all of my projects.
+
+Not something I would recommend using in your projects, but feel free to take a look at the code.

package/components/button.tsx

@@ -0,0 +1,42 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, cx, VariantProps } from "@rinzai/zen";
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 truncate",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: " border text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-10 px-4 py-2",
+				sm: "h-9 rounded-md px-3",
+				lg: "h-11 rounded-md px-8",
+				icon: "h-10 w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export interface ButtonProps
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
+}
+
+const Button =({ className, variant, size, asChild = false, ...props }:ButtonProps) => {
+		const Comp = asChild ? Slot : "button";
+		return <Comp className={cx(buttonVariants({ variant, size, className }))} {...props} />;
+	};
+
+export default Button 
+

package/components/card.tsx

@@ -0,0 +1,32 @@
+import { cx } from "@rinzai/zen";
+interface CardProps extends React.ComponentPropsWithoutRef<"div"> {}
+const Card = (props: CardProps) => {
+	const { className, ...rest } = props;
+	return <div className={cx("card p-4 rounded-lg border shadow-sm", className)} {...rest} />;
+};
+
+const Header = (props: CardProps) => {
+	const { className, ...rest } = props;
+	return <h2 className={cx("card-header flex flex-col typography-heading-2", className)} {...rest} />;
+};
+const Content = (props: CardProps) => {
+	const { className, ...rest } = props;
+	return (
+		<div
+			className={cx("card-content typography-heading-4 justify-between whitespace-pre-wrap py-2", className)}
+			{...rest}
+		/>
+	);
+};
+const Footer = (props: CardProps) => {
+	const { className, ...rest } = props;
+	return (
+		<div className="border-t flex justify-start items-center pt-2">
+			<h2 className={cx("card-footer text-2xl", className)} {...rest} />
+		</div>
+	);
+};
+Card.Header = Header;
+Card.Content = Content;
+Card.Footer = Footer;
+export default Card;

package/components/index.css

@@ -0,0 +1,114 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 96%;
+		--foreground: 20 14.3% 4.1%;
+		--card: 0 0% 100%;
+		--card-foreground: 20 14.3% 4.1%;
+		--popover: 0 0% 100%;
+		--popover-foreground: 20 14.3% 4.1%;
+		--primary: 24.6 95% 53.1%;
+		--primary-foreground: 60 9.1% 97.8%;
+		--secondary: 60 4.8% 95.9%;
+		--secondary-foreground: 24 9.8% 10%;
+		--muted: 60 4.8% 95.9%;
+		--muted-foreground: 25 5.3% 44.7%;
+		--accent: 60 4.8% 95.9%;
+		--accent-foreground: 24 9.8% 10%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 20 5.9% 90%;
+		--input: 20 5.9% 90%;
+		--ring: 24.6 95% 53.1%;
+		--radius: 1rem;
+	}
+
+	.dark {
+		--background: 20 14.3% 4.1%;
+		--foreground: 60 9.1% 97.8%;
+		--card: 20 14.3% 4.1%;
+		--card-foreground: 60 9.1% 97.8%;
+		--popover: 20 14.3% 4.1%;
+		--popover-foreground: 60 9.1% 97.8%;
+		--primary: 20.5 90.2% 48.2%;
+		--primary-foreground: 60 9.1% 97.8%;
+		--secondary: 12 6.5% 15.1%;
+		--secondary-foreground: 60 9.1% 97.8%;
+		--muted: 12 6.5% 15.1%;
+		--muted-foreground: 24 5.4% 63.9%;
+		--accent: 12 6.5% 15.1%;
+		--accent-foreground: 60 9.1% 97.8%;
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 60 9.1% 97.8%;
+		--border: 12 6.5% 15.1%;
+		--input: 12 6.5% 15.1%;
+		--ring: 20.5 90.2% 48.2%;
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}
+
+@layer components {
+	.typography-heading-1 {
+		@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+	}
+	.typography-heading-2 {
+		@apply scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0;
+	}
+	.typography-heading-3 {
+		@apply scroll-m-20 text-2xl font-semibold tracking-tight;
+	}
+	.typography-heading-4 {
+		@apply scroll-m-20 text-xl font-semibold tracking-tight;
+	}
+	.typography-paragraph {
+		@apply leading-7 [&:not(:first-child)]:mt-6;
+	}
+	.typography-lead {
+		@apply text-xl text-muted-foreground;
+	}
+	.typography-large {
+		@apply text-lg font-semibold;
+	}
+	.typography-small {
+		@apply text-sm font-medium leading-none;
+	}
+	.typography-muted {
+		@apply text-sm text-muted-foreground;
+	}
+}
+
+/* Style for the scrollbar */
+::-webkit-scrollbar {
+	width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+	background: hsl(var(--background));
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+	background: hsl(var(--primary));
+	border-radius: 5px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+	background: hsl(var(--primary));
+}
+
+* {
+	@apply scroll-smooth;
+}

package/components/index.ts

@@ -0,0 +1,8 @@
+export {default as Button} from './button';
+export {default as Input} from './input';
+export {default as Card} from './card';
+export {default as Menu} from './menu';
+export {default as Pill} from './pill';
+export {default as Switch} from './switch';
+export {default as TextArea} from './text-area';
+export {default as ThemeSwitcher} from './theme-switcher';

package/components/input.tsx

@@ -0,0 +1,21 @@
+import { cx } from "@rinzai/zen";
+import { ComponentPropsWithoutRef } from "react";
+
+const Input = ({ className, ...rest }: ComponentPropsWithoutRef<"input">) => {
+	return (
+		<input
+			{...rest}
+			autoComplete="off"
+			className={cx(
+				className,
+				"h-10",
+				"placeholder:gray-800 rounded border border-border bg-input pl-5 text-foreground",
+				"focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring",
+				"disabled:cursor-not-allowed disabled:border-muted",
+				"whitespace-pre-wrap",
+			)}
+		/>
+	);
+};
+
+export default Input;

package/components/menu.tsx

@@ -0,0 +1,80 @@
+import Pill from "@feb/pill";
+import { faChevronDown, faChevronRight } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import * as DropdownBaseMenu from "@radix-ui/react-dropdown-menu";
+import { cx } from "@rinzai/zen";
+import { ReactNode } from "react";
+
+interface MenuProps {
+	className?: string;
+	active?: boolean;
+	buttonText: string | ReactNode;
+	children: ReactNode;
+}
+
+interface MenuComponent extends React.FC<MenuProps> {
+	Item: typeof DropdownBaseMenu.Item;
+}
+
+const MenuComponent = ({ className, active, buttonText, children }:MenuProps) => {
+	return (
+		<DropdownBaseMenu.Root>
+			<DropdownBaseMenu.Trigger asChild>
+				<Pill active={active} className={cx("w-fit", className)}>
+					{buttonText}
+					<FontAwesomeIcon icon={faChevronDown} className="-mr-1 ml-2 h-4 w-4" aria-hidden="true" />
+				</Pill>
+			</DropdownBaseMenu.Trigger>
+			<DropdownBaseMenu.Portal>
+				<DropdownBaseMenu.Content
+					loop={true}
+					sideOffset={2}
+					className="w-fit origin-top-right divide-y border-2 border-border divide-border rounded-md bg-background shadow-lg ring-1 ring-background ring-opacity-5 focus:outline-none focus-visible:ring-0"
+				>
+					{children}
+				</DropdownBaseMenu.Content>
+			</DropdownBaseMenu.Portal>
+		</DropdownBaseMenu.Root>
+	);
+};
+
+const Menu: MenuComponent = Object.assign(MenuComponent, {
+	Item: DropdownBaseMenu.Item,
+});
+
+interface MenuSubProps {
+	active?: boolean;
+	buttonText: string;
+	children: ReactNode;
+}
+
+const MenuSub = ({ active, buttonText, children }: MenuSubProps) => {
+	return (
+		<DropdownBaseMenu.Sub>
+			<DropdownBaseMenu.SubTrigger asChild>
+				<Pill active={active} className="flex w-full items-center justify-between whitespace-nowrap">
+					{buttonText}
+					<FontAwesomeIcon icon={faChevronRight} className="-mr-1 ml-2 h-4 w-4" aria-hidden="true" />
+				</Pill>
+			</DropdownBaseMenu.SubTrigger>
+			<DropdownBaseMenu.Portal>
+				<DropdownBaseMenu.SubContent
+					loop={true}
+					sideOffset={2}
+					arrowPadding={2}
+					className="w-fit origin-top-right divide-y border-2 border-gray-600 divide-gray-100 rounded-md bg-neutral-900 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+				>
+					{children}
+					<DropdownBaseMenu.Arrow className="fill-black dark:fill-stone-200 size-2" />
+				</DropdownBaseMenu.SubContent>
+			</DropdownBaseMenu.Portal>
+		</DropdownBaseMenu.Sub>
+	);
+};
+
+Object.assign(Menu, {
+	Item: DropdownBaseMenu.Item,
+	Sub: MenuSub,
+});
+
+export default Menu;

package/components/pill.tsx

@@ -0,0 +1,20 @@
+import { cx } from "@rinzai/zen";
+
+interface PillProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+	active?: boolean;
+}
+
+const Pill = (({ active, className, ...props }:PillProps) => {
+	return (
+		<button
+			className={cx(
+				`rounded-md p-3 text-xl   font-bold transition inline-flex w-full items-center justify-center text-foreground hover:bg-accent hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-opacity-75  whitespace-nowrap hover:ring-0 hover:outline-none `,
+				active ? "text-primary" : "text-muted-foreground",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+
+export default Pill;

package/components/switch.tsx

@@ -0,0 +1,82 @@
+import { faCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Switch as SwitchBase } from "@headlessui/react";
+import { cva, cx } from "@rinzai/zen";
+import { JSX } from "react";
+interface SwitchProps {
+	checked?: boolean;
+	onChange?: (checked: boolean) => void;
+	disabled?: boolean;
+	variant?: "primary" | "danger" | "success";
+	children?: (checked: boolean) => JSX.Element;
+}
+const Switch = ({
+	checked = false,
+	onChange,
+	disabled = false,
+	variant = "primary",
+	children,
+	...rest
+}: SwitchProps) => {
+	return (
+		<SwitchBase
+			checked={checked}
+			disabled={disabled}
+			onChange={onChange}
+			className={SwitchVariants({ variant, checked, disabled })}
+			{...rest}
+		>
+			{children ? (
+				children(checked)
+			) : (
+				<div className="relative w-full h-full">
+					<FontAwesomeIcon
+						icon={faCircle}
+						className={cx(
+							`absolute top-1/2 transform -translate-y-1/2 `,
+							checked ? "left-6 text-blue-600" : "left-1 text-blue-600",
+							disabled && "text-gray-400 dark:text-gray-200",
+							`inline-block h-4 w-4 rounded-full border border-blue-500 [transition:_all_0.5s_cubic-bezier(1,0,0,1)]`,
+						)}
+					/>
+				</div>
+			)}
+		</SwitchBase>
+	);
+};
+const SwitchVariants = cva("relative inline-flex h-6 w-11 items-center rounded-full", {
+	variants: {
+		variant: {
+			danger: "",
+			success: "",
+			primary: "",
+		},
+		checked: {
+			true: "bg-gray-400 dark:bg-gray-200",
+			false: "bg-gray-400 dark:bg-gray-200",
+		},
+		disabled: {
+			true: "dark:bg-gray-600 ring-2 ring-slate-900 dark:ring-slate-400",
+			false: "",
+		},
+	},
+	compoundVariants: [
+		{
+			variant: "danger",
+			checked: true,
+			className: "bg-red-600",
+		},
+		{
+			variant: "primary",
+			checked: true,
+			className: "bg-blue-600",
+		},
+		{
+			variant: "success",
+			checked: true,
+			className: "bg-green-600",
+		},
+	],
+});
+export default Switch
+

package/components/text-area.tsx

@@ -0,0 +1,21 @@
+import { cx } from "@rinzai/zen";
+import { ComponentPropsWithoutRef } from "react";
+
+const TextArea = ({ className, ...rest }: ComponentPropsWithoutRef<"textarea">) => {
+	return (
+		<textarea
+			{...rest}
+			autoComplete="off"
+			className={cx(
+				className,
+				"min-h-[200px] max-h-96 !overflow-auto",
+				"placeholder:gray-800 rounded border border-border bg-input p-2 text-foreground",
+				"focus:border-transparent focus:outline-none focus:ring-2 focus:ring-ring",
+				"disabled:cursor-not-allowed disabled:border-muted",
+				"whitespace-pre-wrap",
+			)}
+		/>
+	);
+};
+
+export default TextArea;

package/components/theme-switcher.tsx

@@ -0,0 +1,81 @@
+import { faLaptop, faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Menu  from "@feb/menu";
+import Pill from "@feb/pill";
+import { useEffect, useState } from "react";
+type Color = "light" | "dark" | "system";
+
+export default function ThemeSwitcher() {
+	const colorModeIcon = { light: faSun, dark: faMoon, system: faLaptop };
+	const localStorageString = `theme`;
+	useEffect(() => {
+		if (typeof window !== "undefined" && !(localStorageString in localStorage)) {
+			localStorage.setItem(localStorageString, "system");
+		}
+	}, []);
+	const [colorMode, setColorMode] = useState<Color>(
+		typeof window !== "undefined" ? ((localStorage.getItem(localStorageString) as Color) ?? "system") : "system",
+	);
+	useEffect(() => {
+		if (["light", "dark"].includes(colorMode)) {
+			if (colorMode === "dark") {
+				document.documentElement.classList.add("dark");
+				setColorMode("dark");
+			} else if (colorMode === "light") {
+				document.documentElement.classList.remove("dark");
+				setColorMode("light");
+			}
+			localStorage.setItem(localStorageString, colorMode);
+		} else {
+			const isSystemThemeDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+			if (isSystemThemeDark) {
+				document.documentElement.classList.add("dark");
+			} else {
+				document.documentElement.classList.remove("dark");
+			}
+			localStorage.setItem(localStorageString, "system");
+		}
+	}, [colorMode]);
+	return (
+		<Menu buttonText={<FontAwesomeIcon icon={colorModeIcon[colorMode] ?? faLaptop} />}>
+			<>
+				<Menu.Item className="focus-visible:outline-none">
+					<Pill
+						active={colorMode === "system"}
+						title="System Theme"
+						onClick={() => {
+							setColorMode("system");
+						}}
+						className="flex w-full whitespace-nowrap p-6 rounded-t-sm rounded-b-none"
+					>
+						<FontAwesomeIcon icon={faLaptop} className={"size-4"} />
+					</Pill>
+				</Menu.Item>
+				<Menu.Item className="focus-visible:outline-none">
+					<Pill
+						active={colorMode === "light"}
+						title="Light Theme"
+						onClick={() => {
+							setColorMode("light");
+						}}
+						className="flex w-full whitespace-nowrap p-6 rounded-none"
+					>
+						<FontAwesomeIcon icon={faSun} className={"size-4"} />
+					</Pill>
+				</Menu.Item>
+				<Menu.Item className="focus-visible:outline-none">
+					<Pill
+						active={colorMode === "dark"}
+						title="Dark Theme"
+						onClick={() => {
+							setColorMode("dark");
+						}}
+						className="flex w-full whitespace-nowrap p-6 rounded-b-sm rounded-t-none"
+					>
+						<FontAwesomeIcon icon={faMoon} className={"size-4"} />
+					</Pill>
+				</Menu.Item>
+			</>
+		</Menu>
+	);
+}

package/eslint.config.mjs

@@ -0,0 +1,36 @@
+import eslint from '@eslint/js';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+export default tseslint.config(
+    {
+        ignores: ['**/*.js', '**/*.d.ts', 'dist/*'],
+    },
+    eslint.configs.recommended,
+    ...tseslint.configs.recommendedTypeChecked,
+    {
+        languageOptions: {
+            parserOptions: {
+                project: ['tsconfig.json'],
+                projectService: true,
+            },
+            globals: {
+                ...globals.browser,
+            },
+        },
+        rules: {
+            '@typescript-eslint/no-unused-vars': [
+                'error',
+                {
+                    argsIgnorePattern: '^_',
+                },
+            ],
+            '@typescript-eslint/no-empty-object-type': 'off',
+            '@typescript-eslint/no-misused-promises': [
+                'error',
+                {
+                    checksVoidReturn: false,
+                },
+            ],
+        },
+    },
+);

package/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en" className="h-[stretch]">
+	<head>
+		<meta charset="UTF-8" />
+	</head>
+	<body>
+		<div id="root">
+			<script type="module" src="/src/index.ts"></script>
+		</div>
+	</body>
+</html>

package/package.json

@@ -0,0 +1,51 @@
+{
+	"name": "@febkosq8/arc",
+	"description": "A React components library for febkosq8",
+	"private": false,
+	"version": "0.3.0",
+	"type": "module",
+	"repository": "https://github.com/febkosq8/arc",
+	"scripts": {
+		"build": "vite build",
+        "push-npm": "npm publish --access public",
+		"prepublishOnly": "npm run build"
+	},
+	"peerDependencies": {
+		"react": "19.0.0",
+		"react-dom": "19.0.0"
+	},
+	"dependencies": {
+		"@fortawesome/free-brands-svg-icons": "6.7.1",
+		"@fortawesome/free-solid-svg-icons": "6.7.1",
+		"@fortawesome/react-fontawesome": "0.2.2",
+		"@headlessui/react": "2.2.0",
+		"@radix-ui/react-dropdown-menu": "2.1.2",
+		"@radix-ui/react-slot": "1.1.0",
+		"@radix-ui/react-switch": "1.1.1",
+		"@rinzai/zen": "0.0.16",
+		"tailwind-merge": "2.5.5"
+	},
+	"devDependencies": {
+		"@tailwindcss/typography": "0.5.15",
+		"@types/node": "22.10.2",
+		"@types/react": "19.0.1",
+		"@types/react-dom": "19.0.2",
+		"@typescript-eslint/eslint-plugin": "8.18.0",
+		"@typescript-eslint/parser": "8.18.0",
+		"@vitejs/plugin-react-swc": "3.7.2",
+		"autoprefixer": "10.4.20",
+		"eslint": "9.16.0",
+		"eslint-plugin-react-hooks": "5.1.0",
+		"eslint-plugin-react-refresh": "0.4.16",
+		"postcss": "8.4.49",
+		"prettier": "3.4.2",
+		"react": "19.0.0",
+		"react-dom": "19.0.0",
+		"tailwindcss": "3.4.16",
+		"tailwindcss-animate": "1.0.7",
+		"typescript": "5.7.2",
+		"vite": "6.0.3",
+		"vite-plugin-dts": "4.3.0",
+		"vite-tsconfig-paths": "5.1.4"
+	}
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+    "$schema": "https://json.schemastore.org/tsconfig",
+    "compilerOptions": {
+		"jsx": "react-jsx",
+        "target": "ESNext",
+        "lib": ["ESNext", "DOM"],
+        "skipLibCheck": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "strict": true,
+        "forceConsistentCasingInFileNames": true,
+        "noFallthroughCasesInSwitch": true,
+        "module": "ESNext",
+        "moduleResolution": "Bundler",
+        "moduleDetection": "force",
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        // "verbatimModuleSyntax": true,
+        "baseUrl": ".",
+        "paths": {
+            "@feb/*": ["components/*"]
+        }
+    },
+    "allowDefaultProject": true,
+    "exclude": ["node_modules", "dist", "demo"]
+}

package/vite.config.ts

@@ -0,0 +1,37 @@
+import react from '@vitejs/plugin-react-swc';
+import { resolve } from 'node:path';
+import tailwindcss from 'tailwindcss';
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+import tsConfigPaths from 'vite-tsconfig-paths';
+import config from './package.json' with {type:"json"};
+export default defineConfig({
+    plugins: [
+        react(),
+        tsConfigPaths(),
+        dts({
+            include: ['components/'],
+        }),
+    ],
+    css: {
+        postcss: {
+            plugins: [tailwindcss],
+        },
+    },
+
+    build: {
+        lib: {
+            entry: resolve('components', 'index.ts'),
+            formats: ['es'],
+        },
+
+        rollupOptions: {
+            external: [...Object.keys(config.peerDependencies)],
+            output: {
+                globals: {
+                    react: 'React',
+                },
+            },
+        },
+    },
+});